JS中常見的防抖動（debounce ）和節流閥（throttle ）
JS中常見的防抖動（debounce ）和節流閥（throttle ）
針對一些會頻繁觸發的事件如scroll、resize，如果正常繫結事件處理函式的話，有可能在很短的時間內多次連續觸發事件，十分影響效能。
因此針對這類事件要進行防抖動或者節流處理
防抖動
它的做法是限制下次函式呼叫之前必須等待的時間間隔。正確實現 debouncing 的方法是將若干個函式呼叫合成 一次，並在給定時間過去之後僅被呼叫一次。
// 將會包裝事件的 debounce 函式
function debounce(fn, delay) { // 維護一個 timer let timer = null; return function() { // 通過 ‘this’ 和 ‘arguments’ 獲取函式的作用域和變數 let context = this; let args = arguments; clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); } }123456789101112131415
// 當用戶滾動時被呼叫的函式 function foo() { console.log(‘You are scrolling!’); }
// 在 debounce 中包裝我們的函式，過 2 秒觸發一次 let elem = document.getElementById(‘container’); elem.addEventListener(‘scroll’, debounce(foo, 2000));
首先，我們為scroll事件繫結處理函式，這時debounce函式會立即呼叫， 因此給scroll事件繫結的函式實際上是debounce內部返回的函式
每一次事件被觸發，都會清除當前的 timer 然後重新設定超時呼叫。 這就會導致每一次高頻事件都會取消前一次的超時呼叫，導致事件處理程式不能被觸發
只有當高頻事件停止，最後一次事件觸發的超時呼叫才能在delay時間後執行
節流
節流是另一種處理類似問題的解決方法。 節流函式允許一個函式在規定的時間內只執行一次。
它和防抖動最大的區別就是，節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式。
比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流閥技術來實現。
var throttle = function(func,delay){
var timer = null;
var startTime = Date.parse(new Date());
return function(){
var curTime = Date.parse(new Date());
var remaining = delay-(curTime-startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if(remaining<=0){
func.apply(context,args);
startTime = Date.parse(new Date());
}else{
timer = setTimeout(func,remaining);
}
}
}12345678910111213141516171819
需要在每個delay時間中一定會執行一次函式，因此在節流函式內部使用開始時間、當前時間與delay來計算remaining，當remaining<=0時表示該執行函數了，如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件，那麼會取消當前的計時器，並重新計算一個remaining來判斷當前狀態。
總結
防止一個事件頻繁觸發回撥函式的方式：
防抖動：將幾次操作合併為一此操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
節流：使得一定時間內只觸發一次函式。 它和防抖動最大的區別就是，節流函式不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而防抖動只是在最後一次事件後才觸發一次函式。 原理是通過判斷是否到達一定時間來觸發函式，若沒到規定時間則使用計時器延後，而下一次事件則會重