javascript - 摆脱双击效果

Question

这是我的小提琴。如您所见，我定义了一个简单的单击事件处理程序：

$('#traveller > a').click(function(e) {
    e.preventDefault();

    var $ul = $('#traveller ul');
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
             $ul.animate({top: '+=' + itemHeight});
        }
    }
});

我注意到当我快速双击几次时，按a.handle-next/ a.handle-prev，ul位置会意外改变。

我如何避免这种行为？

Answer 1

只需检查是否$ul动画：

if($ul.is(':animated')) return;

演示

Answer 2

在执行事件处理程序的主体之前检查是否正在发生动画。

if(!$ul.is(":animated")){
    if($(this).hasClass('handle-next')) {
        if(Math.abs($ul.position().top - parentPadding) < totalHeight - itemHeight) {
            $ul.animate({top: '-=' + itemHeight});
        }
    }
    else {
        if($ul.position().top - parentPadding < 0) {
            $ul.animate({top: '+=' + itemHeight});
        }
    }
}

工作示例 http://jsfiddle.net/A5u43/19/

Answer 3

您需要锁定旅行者的任何动作，直到动画完成。这里我使用了锁定变量，但你可以使用任何方法来锁定它。为此，在动画上使用回调：

      $ul.animate({top: '-=' + itemHeight}, 400, 'swing', function(){
            lock = false;
        });

这是jsfiddle之类的

Answer 4

你可以用 $ul.stop(); 来阻止它。就在你定义 $ul 是谁之前

这是小提琴

var $ul = $('#traveller ul');
$ul.stop(true,true);

http://jsfiddle.net/A5u43/23/