jQuery动画：忽略双击

我有一个简单的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)); } }); } 

动画完成后，click事件再次绑定到链接，最多可执行一次。

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

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