如何防止快速点击两次调用en事件处理程序？

有一个按钮，当用户点击按钮时，一些数据被保存到后端。 问题是当用户非常快速地点击按钮时，事件处理程序会多次执行。

这是代码

var x = 1; $('#button').click(function() { // Do something // Save some data on network x++; console.log(x); }); 

我希望当用户单击按钮一次时执行此处理程序。 即使在双击或三击的情况下，也只能执行一次。 我只是想避免快速点击，这个处理程序可以再次执行

我脑子里有多种解决方案

1. 定义一个全局变量，如IS_BUTTON_HANDLER_WORKING = false ，当您输入处理程序时，将其设置为true，最后再将其设置为false。 并检查是否真的从函数返回。

2. 在开头分离处理程序并在最后重新附加。

假设您的应用程序中有25个按钮。 应该是实现这一目标的最佳方法。

看看这个小提琴

解

 $('#button').click(function() { $(this).attr('disabled', true); // Do something // Save some data on network $(this).removeAttr('disabled'); }); 

使用这个，我们确信我们的下一个处理程序只有在完全执行上一次执行时才会执行。

Answer 1

大卫沃尔什有一个很好的解决方案 。

 // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; }; 

Answer 2

有多种方法可以解决这个问题：

您可以在单击后disable / hide按钮：

 $('#button').attr("disabled", true); 

您还可以在每次单击时设置超时，以确保它不会再次执行：

 var x, y = 1; $('#button').click(function() { if (x) clearTimeout(x); x = setTimeout(function() { // do the work here y++; console.log(y); // ---------------- }, 1000); }); 

因此，每次单击该按钮时，它只会在1000 milliseconds后实际执行代码，如果快速连续单击该按钮，则超时将被清除并重新开始。

_{请注意，上述内容未经测试}

我个人认为禁用的解决方案是最好的，因为它向用户表明他已经点击并且正在发生一些事情，你甚至可以在按钮旁边显示一个加载器。

Answer 3

根据编辑

你应该使用.one（）

要么

您可以在点击function上unbind事件

 var x = 1; function myButtonClick() { $('#button').unbind('click'); // Do something // Save some data on network x++; console.log(x); $('#button').bind('click', myButtonClick); } $('#button').bind('click', myButtonClick); 

Answer 4

您可以使用jQuery one（）方法，如下所示

Answer 5

我正在使用下面的简单解决方案，它一直在为我工作：

 var x = 1; e.handled=false; $('#button').click(function(e) { if(e.handled==false){ e.handled=true; // Do something // Save some data on network x++; console.log(x); } }); 

Answer 6

你正在寻找这个

 $( "button" ).one( "click", function(evt) { x++; console.log(x); }); 

或者，如果您需要一定的时间间隔才能在两次有效点击之间失效。

 var last, diff; $( "button" ).click(function( event ) { if (last){ diff = event.timeStamp - last; if (diff >= SOMEVAL){ x++; console.log(x); } } last = event.timeStamp; }); 

Answer 7

 var btn = document.querySelector('#twofuns'); btn.addEventListener('click',method1); btn.addEventListener('click',method2); function method2(){ console.log("Method 2"); } setTimeout(function(){ btn.removeEventListener('click',method1); },5000); function method1(){ console.log("Method 1"); } 

         Click Me!   

Answer 8

请尝试以下代码

 var x = 1; var fewSeconds=10; /*10 seconds*/ $('#button').click(function() { $('#button').attr("disabled", "disabled"); x++; console.log(x); var btn = $(this); btn.prop('disabled', true); setTimeout(function(){ btn.prop('disabled', false); }, fewSeconds*1000); });