事件的節流（throttle）與防抖（debounce）

有些瀏覽器事件可以在短時間內快速觸發多次，比如調整窗口大小或向下滾動頁面。例如，監聽頁面窗口滾動事件，並且用戶持續快速地向下滾動頁面，那麽滾動事件可能在 3 秒內觸發數千次，這可能會導致一些嚴重的性能問題。

如果在面試中討論構建應用程序，出現滾動、窗口大小調整或按下鍵等事件請務必提及 防抖(Debouncing) 和 函數節流（Throttling）來提升頁面速度和性能。這兩兄弟的本質都是以閉包的形式存在。通過對事件對應的回調函數進行包裹、以自由變量的形式緩存時間信息，最後用 setTimeout 來控制事件的觸發頻率。

Throttle： 第一個人說了算

throttle 的主要思想在於：在某段時間內，不管你觸發了多少次回調，都只認第一次，並在計時結束時給予響應。

這個故事裏，‘裁判’ 就是我們的節流閥， 他控制參賽者吃東西的時機， “參賽者吃東西”就是我們頻繁操作事件而不斷湧入的回調任務，它受 “裁判” 的控制,而計時器，就是上文提到的以自由變量形式存在的時間信息，它是 “裁判” 決定是否停止比賽的依據，最後，等待比賽結果就對應到回調函數的執行。

總結下來，所謂的“節流”，是通過在一段時間內無視後來產生的回調請求來實現的。只要 裁判宣布比賽開始，裁判就會開啟計時器，在這段時間內，參賽者就盡管不斷的吃，誰也無法知道最終結果。

對應到實際的交互上是一樣一樣的：每當用戶觸發了一次 scroll 事件，我們就為這個觸發操作開啟計時器。一段時間內，後續所有的 scroll 事件都會被當作“參賽者吃東西——它們無法觸發新的 scroll 回調。直到“一段時間”到了，第一次觸發的 scroll 事件對應的回調才會執行，而“一段時間內”觸發的後續的 scroll 回調都會被節流閥無視掉。

現在一起實現一個 throttle：

// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
  // last為上一次觸發回調的時間
  let last = 0
  
  // 將throttle處理結果當作函數返回
  return function () {
      // 保留調用時的this上下文
      let context = this
      // 保留調用時傳入的參數
      let args = arguments
      // 記錄本次觸發回調的時間
      let now = +new Date()
      
      // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
      if (now - last >= interval) {
      // 如果時間間隔大於我們設定的時間間隔閾值，則執行回調
          last = now;
          fn.apply(context, args);
      }
    }
}

// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log(‘觸發了滾動事件‘), 1000)

document.addEventListener(‘scroll‘, better_scroll)
 

Debounce： 最後一個參賽者說了算

防抖的主要思想在於：我會等你到底。在某段時間內，不管你觸發了多少次回調，我都只認最後一次。

繼續大胃王比賽故事，這次換了一種比賽方式，時間不限，參賽者吃到不能吃為止，當每個參賽都吃不下的時候，後面10分鐘如果沒有人在吃，比賽結束，如果有人在10分鐘內還能吃，則比賽繼續，直到下一次10分鐘內無人在吃時為止。

對比 throttle 來理解 debounce： 在 throttle 的邏輯裏， ‘裁判’ 說了算，當比賽時間到時，就執行回調函數。而 debounce 認為最後一個參賽者說了算，只要還能吃的，就重新設定新的定時器。

現在一起實現一個 debounce：

// fn是我們需要包裝的事件回調, delay是每次推遲執行的等待時間
function debounce(fn, delay) {
  // 定時器
  let timer = null
  
  // 將debounce處理結果當作函數返回
  return function () {
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments

    // 每次事件被觸發時，都去清除之前的舊定時器
    if(timer) {
        clearTimeout(timer)
    }
    // 設立新定時器
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log(‘觸發了滾動事件‘), 1000)

document.addEventListener(‘scroll‘, better_scroll)

用 Throttle 來優化 Debounce

debounce 的問題在於它“太有耐心了”。試想，如果用戶的操作十分頻繁——他每次都不等 debounce 設置的 delay 時間結束就進行下一次操作，於是每次 debounce 都為該用戶重新生成定時器，回調函數被延遲了不計其數次。頻繁的延遲會導致用戶遲遲得不到響應，用戶同樣會產生“這個頁面卡死了”的觀感。

為了避免弄巧成拙，我們需要借力 throttle 的思想，打造一個“有底線”的 debounce——等你可以，但我有我的原則：delay 時間內，我可以為你重新生成定時器；但只要delay的時間到了，我必須要給用戶一個響應。這個 throttle 與 debounce “合體”思路，已經被很多成熟的前端庫應用到了它們的加強版 throttle 函數的實現中：

// fn是我們需要包裝的事件回調, delay是時間間隔的閾值
function throttle(fn, delay) {
  // last為上一次觸發回調的時間, timer是定時器
  let last = 0, timer = null
  // 將throttle處理結果當作函數返回
  
  return function () { 
    // 保留調用時的this上下文
    let context = this
    // 保留調用時傳入的參數
    let args = arguments
    // 記錄本次觸發回調的時間
    let now = +new Date()
    
    // 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
    if (now - last < delay) {
    // 如果時間間隔小於我們設定的時間間隔閾值，則為本次觸發操作設立一個新的定時器
       clearTimeout(timer)
       timer = setTimeout(function () {
          last = now
          fn.apply(context, args)
        }, delay)
    } else {
        // 如果時間間隔超出了我們設定的時間間隔閾值，那就不等了，無論如何要反饋給用戶一次響應
        last = now
        fn.apply(context, args)
    }
  }
}

// 用新的throttle包裝scroll的回調
const better_scroll = throttle(() => console.log(‘觸發了滾動事件‘), 1000)

document.addEventListener(‘scroll‘, better_scroll)

參考:

Throttling and Debouncing in JavaScript
The Difference Between Throttling and Debouncing
Examples of Throttling and Debouncing
Remy Sharp’s blog post on Throttling function calls
前端性能優化原理與實踐

事件的節流（throttle）與防抖（debounce）