JS中常見的防抖動（debounce ）和節流閥（throttle ）

它的做法是限制下次函數調用之前必須等待的時間間隔。正確實現 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); } }

// 當用戶滾動時被調用的函數 
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); } } }

需要在每個delay時間中一定會執行一次函數，因此在節流函數內部使用開始時間、當前時間與delay來計算remaining，當remaining<=0時表示該執行函數了，如果還沒到時間的話就設定在remaining時間后再觸發。當然在remaining這段時間中如果又一次發生事件，那么會取消當前的計時器，並重新計算一個remaining來判斷當前狀態。

總結

防止一個事件頻繁觸發回調函數的方式：

防抖動：將幾次操作合並為一此操作進行。原理是維護一個計時器，規定在delay時間后觸發函數，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設置。這樣一來，只有最后一次操作能被觸發。

節流：使得一定時間內只觸發一次函數。 
它和防抖動最大的區別就是，節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數，而防抖動只是在最后一次事件后才觸發一次函數。 
原理是通過判斷是否到達一定時間來觸發函數，若沒到規定時間則使用計時器延后，而下一次事件則會重新設定計時器。