jQuery动画：忽略双击答案

【问题标题】：jQuery animation: Ignore double clickjQuery动画：忽略双击
【发布时间】：2011-04-10 02:38:28
【问题描述】：

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

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

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

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

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

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

    }
});

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

它运行良好，除非我单击它两次——然后它会直接滑出页面。

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

【问题讨论】：

标签： jquery click double-click

【解决方案1】：

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

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

【讨论】：

【解决方案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));
            }
        });
}

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：