成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

防抖 - 理解，實踐與實現(xiàn)

yangrd / 2120人閱讀

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

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

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

典型案例

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


點擊查看案例

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

防抖是什么

結(jié)合上方案例，防抖可以理解為：多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次。
而防抖的兩種模式可以根據(jù)實際使用場景分別應(yīng)用。

應(yīng)用場景

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

點擊查看案例

防止頻繁點擊搜索按鈕觸發(fā)搜索請求

點擊查看案例

一步步手寫防抖

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

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

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

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

方法一核心參數(shù)：

等待時長

計時器

繪制方法一的流程圖：

根據(jù)流程圖思路實現(xiàn)方法一的防抖代碼：

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

方法二核心參數(shù)：

等待時長

最早可執(zhí)行時間

繪制方法二的流程圖：

根據(jù)流程圖實現(xiàn)方法二的防抖代碼：

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

同樣，我們可以使用類似方法實現(xiàn)搜索按鈕B的功能。
需求描述：

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

若在這段時間內(nèi)按鈕被點擊，則重新計時。

核心參數(shù)：

等待時長

計時器

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函數(shù)來測試第一個案例

點擊查看案例

總結(jié)

防抖是一個高階函數(shù)，能夠?qū)⒍鄠€事件函數(shù)合并為一個，在“調(diào)整window尺寸”，“在搜索框中實時搜索鍵入文本”， “滾動滾動條”和“防止搜索按鈕頻繁點擊觸發(fā)多余請求”等案例中，十分有用。

鏈接

Lodash推薦：https://css-tricks.com/deboun...

簡單理解防抖定義：https://www.cnblogs.com/woody...

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108521.html

相關(guān)文章

  • 節(jié)流 - 理解，實踐與實現(xiàn)

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

    layman 評論0 收藏0

  • 移動端手勢庫設(shè)計與實踐

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

    wudengzan 評論0 收藏0

  • 初探函數(shù)節(jié)流和函數(shù)防抖—以項目為例(更新es6語法)

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

    趙連江 評論0 收藏0

  • 「中高級前端面試」JavaScript手寫代碼無敵秘籍

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

    Zhuxy 評論0 收藏0

  • 前端進擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

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

    _Zhao 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<