節流 - 理解，實踐與實現

節流(分流)，與防抖（去抖）實現原理相似。本文主要討論節流，鏡像文章：防抖 - 理解，實踐與實現。分開討論防抖和節流，主要是爲了讓一些還不太瞭解節流防抖的讀者能夠有針對性地，逐一掌握它們。
如何用代碼實現節流也是一個要點。本文采用循序漸進地方式，先繪製一個案例的流程圖，再根據流程圖的邏輯編寫節流功能代碼。

文章包含多個可交互案例，可通過博客原文實時查看案例。
歡迎Star和訂閱我的原創前端技術博客。

節流案例

點擊運行案例

當鼠標移動時，mousemove事件頻繁被觸發。上方爲未節流模式，每一次mousemove觸發都會繪製一個圓點。而下方爲節流模式，儘管mosuemove在鼠標移動時被多次觸發，但只有在限定時間間隔纔會繪製圓點。

理解和實現節流

通過上方案例，可以基本瞭解節流的作用: 頻繁觸發的事件，事件處理函數在一定的時間間隔內只執行一次。

不過節流函數是如何做到的？ 以上方案例爲例，繪製其流程圖如下。

核心參數:

1. 間隔時長
2. 計時器

根據流程圖的思路實現分流函數：

function throttle( func, wait ) {
  let timer

  function throttled( ...args ) {
    const self = this

    if ( timer == null ) {
      invokeFunc()
      addTimer()
    }

    function addTimer() {
      timer = setTimeout( () => {
        clearTimer()
      }, wait )
    }

    function invokeFunc() {
      func.apply( self, args )
    }
  }

  return throttled

  function clearTimer() {
    clearTimeout( timer )
    timer = null
  }
}

接下來，用編寫的節流函數實現上方案例
點擊運行案例

應用場景

無限的滾動條
點擊運行案例

總結

節流和防抖類似，都能有效優化系統性能，不過使用業務場景有所區別：

• 防抖既可用於在多次觸發的事件（如文本框逐個輸入文字），也可用於在頻繁觸發的事件（如調整窗口尺寸）。
• 節流多隻用在頻繁觸發的事件（如滾動滾動條）上。

感謝你花時間閱讀這篇文章。如果你喜歡這篇文章,歡迎點贊、收藏和分享，讓更多的人看到這篇文章，這也是對我最大的鼓勵和支持！
歡迎Star和訂閱我的原創前端技術博客。