2012-02-24 79 views
15

可能重複:
Throttle event calls in jQueryjQuery的變化與延遲

我喜歡的jQuery的.change()功能,但我想,以防止觸發噸AJAX請求時的用戶快速更改選擇下拉菜單中的選項。舉個例子,當用戶使用鼠標滾輪時,當他們選擇新選項時,它將觸發每個選項。

我想提出一個很好的乾淨的方式來處理只有當用戶停止更新選擇下拉菜單時才發送這些更新。

處理這種情況有沒有一種簡潔的方法?

+5

你在找什麼叫做* debouncing *。 – 2012-02-24 03:08:01

回答

60

做到這一點,典型的方法是使用setTimeout和clearTimeout:

var wto; 

$('#select').change(function() { 
    clearTimeout(wto); 
    wto = setTimeout(function() { 
    // do stuff when user has been idle for 1 second 
    }, 1000); 
}); 
+3

wto代表什麼? – Gisheri 2015-08-14 15:19:14

+1

Window.TimeOut - 例如只是隨機選擇。 – glortho 2015-08-14 15:48:31

+0

如果您不想創建全局變量,可以使用'.data()'將間隔ID分配給select元素本身。需要更多的代碼,但我知道有些人不喜歡創建全局變量。 – Gavin 2017-07-17 21:14:13

8

我建議你使用underscore.js則:

var newFunction=_.debounce(function(){ 
    alert('You function, after use stop scroll') 
},1000); //Wait seconds after he stops 

$('#select').change(newFunction); 

瞭解更多關於underscore.debounce