我有一個用戶可以點擊的搜索按鈕。快速撥號後只撥打一次功能
此搜索按鈕調用一個函數。當用戶點擊兩次或多次搜索按鈕時（因爲他認爲沒有任何事情發生），我想避免該功能被多次執行。
我想用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