我有一个用户可以点击的搜索按钮。快速拨号后只拨打一次功能
此搜索按钮调用一个函数。当用户点击两次或多次搜索按钮时（因为他认为没有任何事情发生），我想避免该功能被多次执行。
我想用setTimeout(function(){})以某种方式，最后只有在点击按钮距离最后一次点击至少3秒时才再次调用搜索功能。
例子：https://jsfiddle.net/n1rcre75/ - 我希望能够点击该按钮连续两次（在1秒钟后），但都执行功能只运行一次
任何想法？
使按钮处于非活动状态，直到您的搜索功能返回成功或错误，或者直到用户更改搜索字符串。
我的例子是我需要的上下文的简化版本 - 因此禁用搜索不是一个选项。 – DavidDunham
然后，只需从onclick事件中分离事件处理程序，直到搜索结束或搜索字符串发生更改。还要添加一些加载栏，圆圈等，以表明实际上已经完成了一些工作（这将改善用户体验）。 –
当您使用标识的get元素称你们为我们从新闻事件功能，禁用该功能运行时的原始按钮，例如：
function(foo){
document.getElementById("yourButtonId").disabled = true;
//do your function
document.getElementById("btnPlaceOrder").disabled = false;
}
这种使用情况是不完美对于所有情况，例如你想在函数内部进行额外的调用，甚至是xhr。如果你有回调，你应该重新启用这些按钮。
我的例子是我需要的上下文的简化版本 - 因此禁用搜索不是一个选项。 – DavidDunham
在我的示例（https://jsfiddle.net/n1rcre75/）中，我希望能够按搜索按钮两次或更多次（1秒后），然后只运行一次功能...可以选择给时间（在多少秒后，按钮可以被抑制）是优选的 – DavidDunham
上下文：我使用slickgrid（现在已经很老了），列标题在实际内容放入网格之前绘制。我使用加载器动画来“绕过”那段时间。然而，slickgrid不提供“ondrawgridtodiv”事件 – DavidDunham
试试这个代码：
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
$('button').click(function() {
$('button').prop('disabled', true);
setTimeout(function() {
$('button').prop('disabled', false);
}, 3000);
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
是的，但使用变量来设置“搜索状态”不是我的首选选项，因为我将不得不将它设置为允许搜索。我不想添加另一个“依赖”，而是使用一些延迟/超时功能来帮助我实现目标 – DavidDunham
好的，看看最新版本。 –
如果你打算使用jQuery，即使OP从未提及jQuery，为什么不使用'one' – Jonathan
只是另一种解决方案：
<button onclick="buttonClick()">Click</button>
<script>
var running = false;
function buttonClick(){
if(running == false){
running = true;
//your code
setTimeout(function(){running = false}, 3000);
}
}
</script>
只是看守搜索：
var button = document.getElementById('search');
var runSearch = true;
button.addEventListener('click', function(evt) {
evt.preventDefault();
if(!runSearch){
return;
}
console.log('do search');
runSearch = false;
setTimeout(function(){
runSearch = true;
}, 3000);
});
或者，如果你不希望引入另一个变量到范围：
document.getElementById('search').addEventListener('click', (function() {
var runSearch = true;
return function(evt) {
evt.preventDefault();
if(!runSearch){
return;
}
runSearch = false;
console.log('do search');
setTimeout(function(){
runSearch = true;
}, 3000);
}
})());
通用代码。您可以avoid_double_click类添加到该路段/按钮要避免多次点击
jQuery('.avoid_double_click').on('click', function(e) {
var onclick_event = jQuery(this).attr('onclick');
jQuery(this).removeAttr("onclick");
var that = this;
setTimeout(function(){
jQuery(that).attr('onclick', onclick_event);
},2000);
});
该功能可用于使其工作withou牛逼了必须照顾
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);
};
};
我创建了一个构造函数的可重复使用的方式来处理这个任何附加状态或参数。您可以在创建对象或调用对象时提供延迟。它有一个300ms的默认值。
function FunctionInvoker(waitTime) {
this.timerIdentifier = null;
this.waitTime = waitTime || 300;
var self = this;
this.invoke = function (callback, waitTime) {
self.cancel();
self.timerIdentifier = setTimeout(function() {
self.cancel();
callback();
}, waitTime || self.waitTime);
};
this.cancel = function() {
if (self.timerIdentifier != null) {
clearTimeout(self.timerIdentifier);
self.timerIdentifier = null;
}
}
}
要使用它：
var functionInvoker = new FunctionInvoker();
functionInvoker.invoke(function() {
// whatever you want to do (callback function)
saveMyData(); // for ex: save data
});
我采用了滑盖打交道时使用这个代码。该滑块多次进行AJAX调用。通过使用functionInvoker，我只能在滑块为Xms保持相同的值时才能进行AJAX调用。
第一次通话时禁用该按钮，然后在处理完成后启用它。 – TheFrozenOne
删除按钮的onclick代码，并使用javascript替换为“”，在特定超时再次放回之后。现在，即使按钮被点击多次，onclick只会被执行一次 – Abhi
例如：在这里我想按搜索按钮两次（1秒后），并使div只搜索“搜索...”一次https：/ /jsfiddle.net/n1rcre75/ – DavidDunham