jquery - jQuery动画：忽略双击

Question

我有一个简单的 jQuery 动画，可以在 .click() 事件上将 div 向右或向左移动。

但是，如果用户单击该事件两次，它会触发两次，这会打乱格式。

这是我所拥有的一个例子：

$('a#right').click( function () {

if ($(this).is(':visible')) {

    $('#slide').animate({right: '+=257'}, 400, function () {
    slide_button();
    });

    }
});

函数 slide_button() 将检查 div 的位置是否在用户视点可接受的范围内。如果是这样，它将允许右或左按钮可见。如果超出限制，它将隐藏按钮。

它工作得很好，除非我点击它两次——然后它就会直接滑出页面。

有没有办法使用它来忽略双击？

Answer 1

只需检查元素是否已经动画：

$('a#right').click( function () {
    if ($(this).is(':visible') && !$('#slide').is(':animated')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
        });
    }
});    

Answer 2

您可以在 jquery中使用one() ：

$('a#right').one("click", function () {
    slide($(this));
});

function slide(obj) {
    if (obj.is(':visible')) {
        $('#slide').animate({right: '+=257'}, 400, function () {
            slide_button();
            $('a#right').one("click", function () {
              slide($(this));
            }
        });
}

动画完成后，再次与链接绑定点击事件，最多可以执行一次。

Answer 3

我通常通过设置一个全局变量来解决这个问题并运行一个 if like

 clicked = true;
 $(div).click(function(){
   if (!clicked){
       clicked = true;
       Your function with a callback setting clicked to false
   }
   ....
 })

Answer 4

您可以.unbind()单击一次单击事件，这将阻止它多次执行：

$('a#right').click(function () {
    $(this).unbind('click');
    ...
});

动画完成后，如果您需要再次单击，可以重新绑定它。