javascript - 轮播动画事件问题

Question

我构建的轮播有问题。它在容器内有元素，当单击类为 moveCarouselRight 的按钮时，这些元素会“向左”移动可见容器的大小。

我的问题是，当用户点击太快时，即双击，动画似乎触发了两次，这意味着元素没有正确地放入容器中，就好像第一次“左”操作还没有完成一样。

如您所见，我尝试使用“禁用”标志修复此问题，但似乎在第一个事件的 js 到达该代码行之前触发了第二个点击事件。

var disabled = false;

$('.moveCarouselRight').on('click', function() {

if (!disabled) {

    disabled = true;

    //change css property 'left' depending on container size

    disabled = false;
}
});

jsFiddle 链接:
jsfiddle.net/6TPcT/5

Answer 1

使用这个:

JS

$(".moveCarouselRight").dblclick(function(event){
    event.preventDefault();
});

或

$(".moveCarouselRight").dblclick(function(event){
    return false;
});

或

$(".moveCarouselRight").one("click", function(event) {
    //do something
});

链接:http://api.jquery.com/one/