jQuery动画：忽略双击

我有一个简单的jQuery动画，可以在.click（）事件发生时将div向右或向左移动

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

以下是我所拥有的一个例子：

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

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

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

    }
});

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

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

是否有一种方法可以忽略双击？

单击后，您可以删除单击事件，这将阻止它多次执行：

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

---

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

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

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

---

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

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

您可以在jquery中使用：

$('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));
            }
        });
}

动画完成后，单击事件将再次绑定到链接，最多只能执行一次