如何使用jquery中的切换来防止点击队列的建立？ 尝试使用bind / unbind（’click’）

如上所述，事件附件的实现已被破坏。 最重要的是，jQuery中有一个名为.stop的方法，它使您无需使用bind / unbind。

 $("#button").click(function(){ $(this).next().stop().toggle("slow"); }); 

它只是清除动画队列并停止当前动画，让你启动下一个动画。

停止jQuery文档的function。 请注意，它有两个属性 – clearQueue和goToEnd。 阅读更多有关使用此方法的更多信息。

首先，你附加事件的方式被打破了。 我不知道在你的代码中询问问题或真​​正的错误是否只是急速，但这是设置处理程序的正确方法：

 $("#button").click(function(evt) { // <- you need to pass it a function! $(this).unbind('click').next() .toggle("slow",function(){$('#button').bind('click')}); }); 

但是你的问题。 我认为你将从使用jQuery的onefunction中受益。 一旦调用了单击处理程序，就会将其作为单击处理程序删除; 因此，它只执行一次 ，只需一次点击。 要在动画后重新点击点击处理程序，我认为你做对了; 动画结束后重新绑定它。

 function clickHandler(evt) { $(this).next().toggle("slow", function() { $('#button').bind('click', clickHandler); }); } $("#button").one('click', clickHandler); 

如果使用one对你来说太慢了，那么最快的方法就是在锚点的href上添加javascript。 但是当你准备再次执行时，你需要切换一个全局布尔变量。

 ... function clickHandler() { if( someBoolean ) { someBoolean = false; //do stuff } someBoolean = true; } 

第一种方法

在切换动画时放弃事件点击：

 $("#button").click(function(e) { e.stopPropagation(); if ( $(this).next().is(':animated') ) { return false; } $(this).next().toggle("slow"); }); 

见演示

第二种方法

设置时间延迟以确保仅触发最新点击：

 var timeID; $("#button").click(function(e) { var $el = $(this); clearTimeout(timeID); timeID = setTimeout(function() { $el.next().toggle("slow"); }, 250); }); 

见演示

您可以从stop()方法获得一些好处，而不是忽略后续的点击。 有关示例，请参阅快速提示：阻止动画队列构建。 他正在谈论hover ，但它适用于你可能在同一事件上一个接一个地运行动画的任何地方。

或者，你可以禁用按钮，而不是删除整个点击处理程序？ 它可能表达了“不要再次点击我”的意图，而不是放弃点击。

jquery的切换方法存在问题，当用户快速点击切换元素时，有时会给出错误的结果。 它由于点击事件的时间秒而发生，当第一个事件未完全完成时，第二个事件触发器会产生问题。 解决这个问题有点棘手，但在settimeout函数的帮助下很容易：

  $('.navbar-toggle').on('click', function() { $('.mob-logo').toggle(); $('.navbar-toggle').css('pointer-events', 'none'); setTimeout(function() { // enable click after 0.5second $('.navbar-toggle').css('pointer-events', 'all'); }, 500); // 1 second delay });