減少用於自動完成的AJAX呼叫量？

Question

我正在爲我的搜索文本框的關鍵字發送AJAX查詢，但是我想要執行的操作是在用戶停止鍵入之後等待1秒鐘。

代碼，我有：

searchBar = $('#searchBar'); 
searchBar.timerID = null; 
searchBar.textBox = $('#searchBar > input[name="q"]'); 
searchBar.textBox.sendQuery = function(){ 
    alert('SEND AJAX HERE'); 
    searchBar.timerID = null; 
}; 
searchBar.textBox.keyup(function() { 
    if(searchBar.timerID){ clearTimeout(searchBar.timerID); } 
    searchBar.timerID = setTimeout(searchBar.textBox.sendQuery, 1000); 
}); 

看來工作，但它是最好的辦法，以這件事？

Answer 1

這個plugin會在短暫的延遲後觸發一個事件。然後你可以使用類似以下的東西：

$(searchBar).bindWithDelay("keyup", callback, 1000); 

Answer 2

查找到本Alman的防抖動插件http://benalman.com/projects/jquery-throttle-debounce-plugin/

Answer 3

這是不好的做法是污染jQuery對象返回像$('#searchBar').value = 'blah' - 而不是你應該ultilise的.data方法：

你並不真的需要searchBar，只需將計時器放在相應的輸入元素上即可。爲了得到更好的說明，我總是使用$作爲前綴。

$input = $('#searchBar input[name="q"]'); 

var sendQuery = function() { 
    alert('SEND AJAX HERE'); 
}; 

$input.keyup(function() { 
    var timer = $(this).data('timerID'); 
    if (timer) { 
     clearTimeout(timer); 
    } 
    $(this).data('timerID', setTimeout(sendQuery, 1000)); 
});