防抖 - 理解，實踐與實現

爲了完整閱讀體驗，歡迎移步到個人博客原文。

防抖（去抖），以及節流（分流）在平常開發中可能用的很少，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節流 - 理解，實踐與實現。分開討論防抖和節流，主要是爲了讓一些還不太瞭解防抖節流的讀者可以有針對性地，逐一掌握它們。
防抖有兩種模式（容易讓人迷惑）：延時執行和直接執行。後續詳細討論。
防抖還有一個關鍵點是若是用代碼實現。本文以按部就班地方式，先以實現一個簡單案例爲例，繪製流程圖，再根據流程圖邏輯編寫防抖功能代碼。

典型案例

以平常開發中經常使用的搜索按鈕爲例，若用戶點擊一次搜索按鈕後，不當心「手抖」很快又點了一次按鈕，防抖能夠規避第二次甚至更屢次搜索。

點擊查看案例

第一個搜索按鈕未作任何防抖處理。
搜索按鈕A爲第一種防抖模式：延時執行。若用戶連續快速點擊屢次，只有最後一次點擊結束，延時一段時間後才執行搜索。
搜索按鈕B爲第二種防抖模式：直接執行。若用戶連續快速點擊屢次，只有第一次點擊會執行搜索。

防抖是什麼

結合上方案例，防抖能夠理解爲：屢次觸發事件後，事件處理函數只執行一次。
而防抖的兩種模式能夠根據實際使用場景分別應用。

應用場景

在搜索框中實時鍵入文本搜索

點擊查看案例

防止頻繁點擊搜索按鈕觸發搜索請求

點擊查看案例

一步步手寫防抖

接下來咱們經過一個案例梳理實現防抖的思路。
假設咱們要實現本文第一個案例中搜索按鈕A的功能。首先整理需求：

1. 點擊搜索按鈕後，函數並不立刻執行，而是等一段時間再執行。
2. 若在這段時間內，按鈕再次被點擊，則從新開始計時，等待一樣一段時間後再執行。

實現的方法有兩種，推薦第一種，用計時器(setTimeout)簡化代碼，將重心放在實現防抖的邏輯上。

方法一核心參數：

1. 等待時長
2. 計時器

繪製方法一的流程圖：

根據流程圖思路實現方法一的防抖代碼：

function debounce( func, wait = 0 ) {
  let timer
  
  function debounced( ...args ) {
    const self = this
    if ( timer == null ) {
      addTimer()
      return
    }

    if ( timer != null ) {
      clearTimer()
      addTimer()
      return
    }

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

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

  return debounced

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

方法二核心參數：

1. 等待時長
2. 最先可執行時間

繪製方法二的流程圖：

根據流程圖實現方法二的防抖代碼：

function debounce( func, wait = 0 ) {
  // Earliest time when func can be invoked
  let earliest
  
  function debounced( ...args ) {
    const self = this
    
    if ( typeof earliest === 'undefined' ) {
      setEarliset()
    }

    if ( typeof earliest !== 'undefined' ) {
      if ( now() >= earliest ) {
        invokeFun()
      } else {
        setEarliset()
      }
    }

    function setEarliset() {
      earliest = now() + wait
    }

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

  return debounced

  function now() {
    return +new Date()
  }
}

一樣，咱們可使用相似方法實現搜索按鈕B的功能。
需求描述：

1. 點擊搜索按鈕後，函數立刻執行。只有等待一段時間後被點擊才能執行函數。
2. 若在這段時間內按鈕被點擊，則從新計時。

核心參數：

1. 等待時長
2. 計時器

function debounce( func, wait = 0 ) {
  let timer
  
  function debounced( ...args ) {
    const self = this

    timer == null && invokeFunc()

    timer != null && clearTimer()
    
    timer = setTimeout( clearTimer, wait )

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

  return debounced

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

接下來咱們使用剛纔編寫的debounce函數來測試第一個案例

點擊查看案例

總結

防抖是一個高階函數，可以將多個事件函數合併爲一個，在「調整window尺寸」，「在搜索框中實時搜索鍵入文本」， 「滾動滾動條」和「防止搜索按鈕頻繁點擊觸發多餘請求」等案例中，十分有用。

連接

• Lodash推薦：https://css-tricks.com/deboun...
• 簡單理解防抖定義：https://www.cnblogs.com/woody...

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