jquery - 如果单击太快，jQuery 滚动按钮将停止工作

Question

http://vc4hp.net/temp/4/test.htm

如果您快速单击“向左滚动”，您应该能够连续单击它至少几次。

然后您需要多次单击“向右滚动”，但它最终会起作用。

然后下一次“向左滚动”似乎再也无法工作了......

（顺便说一句，我似乎无法让它在 jsfiddle 中工作：http: //jsfiddle.net/3Dmya/）

Answer 1

我的解决方案防止动画上的双重触发，它只绑定到应该能够触发的按钮，并在单击后立即取消绑定：

var scrolltime = 1000;

var scroll_left = function(e) {
  $('#scroll_left').unbind('click');
  $('#scroll_right').click(scroll_right);
  $('#left_content').animate({
    left: '-50%'
  }, scrolltime, function() {
    // Animation complete.
  });
  $('#right_content').animate({
    left: '50%'
  }, scrolltime, function() {
    // Animation complete.
  });
}

var scroll_right = function(e) { 
  $('#scroll_right').unbind('click');
  $('#scroll_left').click(scroll_left);
  $('#left_content').animate({
    left: '50%'
  }, scrolltime, function() {
    // Animation complete.
  });
  $('#right_content').animate({
    left: '150%'
  }, scrolltime, function() {
    // Animation complete.
  });
}

$(document).ready(function(){    
    $('#scroll_left').click(scroll_left);
    //$('#scroll_right').click(scroll_right);
});
​

小提琴：http: //jsfiddle.net/3Dmya/3/

Answer 2

http://jsfiddle.net/3Dmya/4/

调用$.stop()似乎对我有用，但我很难可靠地重现该错误。

stop将第一个参数设置为 true 会清除当前动画队列，因此当重复单击按钮时，只会执行一个绑定的动画事件。

http://api.jquery.com/stop/

var scrolltime = 3000;

$('#scroll_left').click(function(e) {
    $('#left_content').stop(true).animate({
        left: '-50%'
    }, scrolltime, function() {
        // Animation complete.
    });
    $('#right_content').stop(true).animate({
        left: '50%'
    }, scrolltime, function() {
        // Animation complete.
    });
});

$('#scroll_right').click(function(e) {
    $('#left_content').stop(true).animate({
        left: '50%'
    }, scrolltime, function() {
        // Animation complete.
    });
    $('#right_content').stop(true).animate({
        left: '150%'
    }, scrolltime, function() {
        // Animation complete.
    });
});