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 に設定すると、現在のアニメーション キューがクリアされるため、ボタンが繰り返しクリックされると、バインドされたアニメーション イベントの 1 つだけが実行されます。

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.
    });
});