JavaScript 中的防抖和節流

阿新 • • 發佈：2021-07-12

什麼是防抖

函式防抖（debounce）：當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定的時間到來之前，又一次觸發了事件，就重新開始延時。如下圖，持續觸發 scroll 事件時，並不執行 handle 函式，當 1000 毫秒內沒有觸發 scroll 事件時，才會延時觸發 scroll 事件。

防抖應用場景如下

搜尋框輸入查詢，如果使用者一直在輸入中，沒有必要不停地呼叫去請求服務端介面，等使用者停止輸入的時候，再呼叫，設定一個合適的時間間隔，有效減輕服務端壓力。
表單驗證
按鈕提交事件。
瀏覽器視窗縮放，resize 事件 (如視窗停止改變大小之後重新計算佈局) 等。

具體實現
- 非立即執行版
  JAVASCRIPT
```
function debounce(func, wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);      
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait);
  }
}
```
  非立即執行版的意思是觸發事件後函式不會立即執行，而是在 n 秒後執行，如果在 n 秒內又觸發了事件，則會重新計算函式執行時間。
- 立即執行版
  JAVASCRIPT
```
function debounce(func,wait) {
  let timeout;
  return function () {
    let context = this;
    let args = arguments;
    if (timeout) clearTimeout(timeout);
    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, wait)
    if (callNow) func.apply(context, args)
  }
} 
```
  立即執行版的意思是觸發事件後函式會立即執行，然後 n 秒內不觸發事件才能繼續執行函式的
  
  什麼是節流
  
  函式節流（throttle）：當持續觸發事件時，保證一定時間段內只調用一次事件處理函式。節流通俗解釋就比如我們水龍頭放水，閥門一開啟，水嘩嘩的往下流，秉著勤儉節約的優良傳統美德，我們要把水龍頭關小點，最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。如下圖，持續觸發 scroll 事件時，並不立即執行 handle 函式，每隔 1000 毫秒才會執行一次 handle 函式。
  
  節流應用場景：
  - 按鈕點選事件
  - 拖拽事件
  - onScoll
  - 計算滑鼠移動的距離 (mousemove)
  具體實現
  - 時間戳版
    JAVASCRIPT
```
function throttle(func, wait) {
  let previous = 0;
  return function() {
    let now = Date.now();
    let context = this;
    let args = arguments;
    if (now - previous > wait) {
      func.apply(context, args);
      previous = now;
    }
  }
}
```
    當高頻事件觸發時，第一次會立即執行（給 scroll 事件繫結函式與真正觸發事件的間隔一般大於 delay，如果你非要在網頁載入 1000 毫秒以內就去滾動網頁的話，我也沒辦法 o (╥﹏╥) o），而後再怎麼頻繁地觸發事件，也都是每 delay 時間才執行一次。而當最後一次事件觸發完畢後，事件也不會再被執行了（最後一次觸發事件與倒數第二次觸發事件的間隔小於 delay，為什麼小於呢？因為大於就不叫高頻了呀 (╹▽╹)）。
  - 定時器版
    JAVASCRIPT
```
function throttle(func, wait) {
  let timeout;
  return function() {
    let context = this;
    let args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(context, args)
      }, wait)
    }
  }
}
```
    當觸發事件的時候，我們設定一個定時器，再次觸發事件的時候，如果定時器存在，就不執行，直到 delay 時間後，定時器執行執行函式，並且清空定時器，這樣就可以設定下個定時器。當第一次觸發事件時，不會立即執行函式，而是在 delay 秒後才執行。而後再怎麼頻繁觸發事件，也都是每 delay 時間才執行一次。當最後一次停止觸發後，由於定時器的 delay 延遲，可能還會執行一次函式。
    
    節流中用時間戳或定時器都是可以的。更精確地，可以用時間戳 + 定時器，當第一次觸發事件時馬上執行事件處理函式，最後一次觸發事件後也還會執行一次事件處理函式。
  - 定時器 + 時間戳版本
    JAVASCRIPT
```
// 節流throttle程式碼（時間戳+定時器）：
var throttle = function(func, delay) {     
  var timer = null;     
  var startTime = Date.now();     
  return function() {             
    var curTime = Date.now();             
    var remaining = delay - (curTime - startTime);             
    var context = this;             
    var args = arguments;             
    clearTimeout(timer);              
    if (remaining <= 0) {                    
      func.apply(context, args);                    
      startTime = Date.now();              
    } else {                    
      timer = setTimeout(func, remaining);              
    }      
  }
}
```
    在節流函式內部使用開始時間 startTime、當前時間 curTime 與 delay 來計算剩餘時間 remaining，當 remaining<=0 時表示該執行事件處理函數了（保證了第一次觸發事件就能立即執行事件處理函式和每隔 delay 時間執行一次事件處理函式）。如果還沒到時間的話就設定在 remaining 時間後再觸發（保證了最後一次觸發事件後還能再執行一次事件處理函式）。當然在 remaining 這段時間中如果又一次觸發事件，那麼會取消當前的計時器，並重新計算一個 remaining 來判斷當前狀態。
  總結
  - 函式防抖
    
    將幾次操作合併為一此操作進行。原理是維護一個計時器，規定在 delay 時間後觸發函式，但是在 delay 時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。
  - 函式節流
    
    使得一定時間內只觸發一次函式。原理是通過判斷是否到達一定時間來觸發函式。
  - 區別
    
    函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式
    
    而函式防抖只是在最後一次事件後才觸發一次函式。比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。
  文章參考
  - js 防抖和節流
  - js 防抖和節流