如何節制jQuery事件的回調？

Question

好的，所以我在google中搜索，在輸入中輸入文本，並立即給出條目。但我不喜歡那樣。我使用類似$("TEXTINPUT").keyup(function() {的東西。當用戶輸入速度非常快時，它會多次連接到數據庫。是否有可能，只有當用戶停止輸入1-2秒時，我們纔會連接到PHP文件，但不是立即？我需要在jQuery中做到這一點。謝謝。

Answer 1

嘗試：

var time_out; 
$("TEXTINPUT").keyup(function(){ 
    clearTimeout(time_out); 
    time_out = setTimeout(your_function, 500); 
} 

function your_function() 
{ 
    /*CHECK DATABASE*/ 
} 

Answer 2

下面是我通常接近它：

$(function(){ 
    var tiTO, jqXHR; 
    $('textinput').keyup(function(){ 
    if (tiTO) clearTimeout(tiTO); 
    if (jqXHR && jqXHR.abort) jqXHR.abort(); 
    tiTO = setTimeout(function(){ 
     jqXHR = $.ajax({....}); 
     //Ajax call to PHP 
    },2000); 
    }); 
}); 

每個KEYUP復位超時，並中止任何活動的阿賈克斯。

Answer 3

如果使用Underscore Library它像這樣簡單：從下劃線網站

$("TEXTINPUT").keyup(_.throttle(function() {...}, 150));

文檔：

油門     _.throttle（功能，等）

返回功能的節流版本，即，調用 時反覆，只會實際調用包裝的函數最多一次 每每等待的毫秒。對於速度限制事件很有用，該事件發生的速度比您能夠跟上的要快。

也有debounce功能：

防抖動     _.debounce（功能，等）

調用抖功能將推遲執行，直到後等待 毫秒有自上次調用函數 以來已過去。用於實現在輸入停止後纔會發生的行爲 。例如：渲染降價評論的預覽 ，重新計算佈局窗口已經停止 被調整後...

Answer 4

此功能將起到有點像underscore.js，但沒有額外的依賴。它還會將調用的範圍和參數傳遞給包裝函數。與YoannM的回答不同，這將返回一個自包含的回調函數，它不使用外部變量（EG，根據需要多次使用）。

function throttle (func, wait) { 
    return function() { 
     var that = this, 
      args = [].slice(arguments); 

     clearTimeout(func._throttleTimeout); 

     func._throttleTimeout = setTimeout(function() { 
      func.apply(that, args); 
     }, wait); 
    }; 
} 

而且用法與underscore.js庫的用法幾乎相同。

$('input').on('input keyup', throttle(function() { 
    // ... 
}, 100));