有一个按钮，当用户点击按钮时，一些数据会保存到后端。问题是当用户快速点击按钮时，事件处理程序会被执行多次。
这是代码
var x = 1;
$('#button').click(function() {
// Do something
// Save some data on network
x++;
console.log(x);
});
我希望这个处理程序在用户只点击一次按钮时执行。即使在双击或三次点击的情况下，也应该只执行一次。我只是想避免快速点击，这个处理程序当然可以再次执行
我脑海中有多种解决方案，比如
定义一个全局变量，如
IS_BUTTON_HANDLER_WORKING = false，当您输入处理程序时，将其设置为true，最后再次设置为false。并检查是否为真，只需从函数返回即可。开始时分离处理程序，结束时重新连接。
假设您的应用程序中有25个按钮。实现这一点的最佳方法应该是什么。
看看这个Fiddle
解决方案
$('#button').click(function() {
$(this).attr('disabled', true);
// Do something
// Save some data on network
$(this).removeAttr('disabled');
});
使用它，我们确信只有在上一次执行完全完成后，我们的下一个处理程序才会被执行
David Walsh有一个很棒的解决方案。
// 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);
};
};
有多种方法可以处理此问题：
点击后可以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之后实际执行代码，如果连续快速单击按钮，则超时将被清除并重新开始。
请注意，以上内容未经测试
就我个人而言，我认为禁用的解决方案是最好的，因为它向用户表明他已经点击了，并且正在发生一些事情，你甚至可以在按钮旁边显示一个加载程序。
根据编辑
你应该使用.one（）
或
您可以在点击功能上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);
您可以使用jQueryone（）方法，如下所示
我正在使用下面的简单解决方案，它对我来说效果很好：
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);
}
});
您正在寻找此
$( "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;
});
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");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-RemoveEventListener after Interval</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>您可以在如上所述的java脚本中删除多个侦听器中的一个侦听器。
假设您已将事件侦听器附加到按钮，一种方法是从按钮中删除事件侦听器，然后在需要时再次附加它。为此，请在事件侦听器函数本身中添加以下代码：
function handleButtonClick(e) {
e.target.removeEventListener("click", handleBackButton);
}
根据您的设置，这可能会起作用。
尝试以下代码
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);
});
启动Busy Indicator on按钮，点击并停止，然后返回结束
Function DoSomething(){
startBusyIndicator();
// perform Action //
stopBusyIndicator();
return;
}