防抖 - 理解，實踐與實現

yangrd 發布于2019-08-26 12:20 / 2099人閱讀

摘要：本文主要討論防抖，鏡像文章節流理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解防抖節流的讀者能夠有針對性地，逐一掌握它們。防抖是什么結合上方案例，防抖可以理解為多次觸發事件后，事件處理函數只執行一次。

為了完整閱讀體驗，歡迎移步到我的博客原文。

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

典型案例

以日常開發中常用的搜索按鈕為例，若用戶點擊一次搜索按鈕后，不小心“手抖”很快又點了一次按鈕，防抖可以規避第二次甚至更多次搜索。

點擊查看案例

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

防抖是什么

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

應用場景

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

點擊查看案例

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

點擊查看案例

一步步手寫防抖

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

點擊搜索按鈕后，函數并不馬上執行，而是等一段時間再執行。

若在這段時間內，按鈕再次被點擊，則重新開始計時，等待同樣一段時間后再執行。

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

方法一核心參數：

等待時長

計時器

繪制方法一的流程圖：

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

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
  }
}

方法二核心參數：

等待時長

最早可執行時間

繪制方法二的流程圖：

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

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的功能。
需求描述：

點擊搜索按鈕后，函數馬上執行。只有等待一段時間后被點擊才能執行函數。

若在這段時間內按鈕被點擊，則重新計時。

核心參數：

等待時長

計時器

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...

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

云服務器 GPU云服務器 VUE防抖與節流微服務架構與實踐機器學習與業務實踐深度學習與理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108521.html

節流 - 理解，實踐與實現

摘要：節流分流，與防抖去抖實現原理相似。本文主要討論節流，鏡像文章防抖理解，實踐與實現。分開討論防抖和節流，主要是為了讓一些還不太了解節流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節流模式，每一次觸發都會繪制一個圓點。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節流(分流)，與防抖（去抖）實現原理相似。本文主...

layman 2019-08-26 13:41 評論0 收藏0
移動端手勢庫設計與實踐

摘要：前言本次給大家分享的是常見的移動端單點觸摸事件的設計思路及實踐。實現即手指滑動事件，應用場景如輪播圖左右滑動切換，整屏頁面滑動翻頁等，算是移動端最常見的手勢之一了。前言本次給大家分享的是常見的移動端單點觸摸事件的設計思路及實踐。核心技術主要就是利用移動端的以下3個觸摸事件，來模擬和實現自定義的手勢操作 touchstart：手指觸摸到屏幕的一瞬間觸發 touchmove：手指...

wudengzan 2019-08-22 15:45 評論0 收藏0
初探函數節流和函數防抖—以項目為例(更新es6語法)

摘要：而上述兩種方法，就叫做函數的節流和防抖。二函數節流和函數防抖函數節流函數節流函數節流是讓這個函數在間隔某一段時間執行一次。在這個項目中，我認為函數節流和函數防抖都能很好的解決問題。一項目需求最近在做一些小的練手代碼的時候，碰到了一個很常見的問題，當在搜索框中進行搜索的時候，如果快速輸入很多字符的話，搜索框的監聽回調函數會執行很多次，如果回調業務較復雜的話，可能會導致頁面運行緩慢甚...

趙連江 2019-08-20 17:03 評論0 收藏0
「中高級前端面試」JavaScript手寫代碼無敵秘籍

摘要：第一種直接調用避免在不必要的情況下使用，是一個危險的函數，他執行的代碼擁有著執行者的權利。來自于此外，實現需要考慮實例化后對原型鏈的影響。函數柯里化的主要作用和特點就是參數復用提前返回和延遲執行。手寫路徑導航實現一個new操作符實現一個JSON.stringify 實現一個JSON.parse 實現一個call或 apply 實現一個Function.bind 實現一個繼承實現一個J...

Zhuxy 2019-05-23 16:26 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0