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

資訊專欄INFORMATION COLUMN

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

layman / 1022人閱讀

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

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

文章包含多個可交互案例，可通過博客原文實時查看案例
同時歡迎訂閱我的博客
節(jié)流案例

點擊運行案例

當(dāng)鼠標(biāo)移動時，mousemove事件頻繁被觸發(fā)。上方為未節(jié)流模式，每一次mousemove觸發(fā)都會繪制一個圓點。而下方為節(jié)流模式，盡管mosuemove在鼠標(biāo)移動時被多次觸發(fā)，但只有在限定時間間隔才會繪制圓點。

理解和實現(xiàn)節(jié)流

通過上方案例，可以基本了解節(jié)流的作用: 頻繁觸發(fā)的事件，事件處理函數(shù)在一定的時間間隔內(nèi)只執(zhí)行一次。

不過節(jié)流函數(shù)是如何做到的？ 以上方案例為例，繪制其流程圖如下。

核心參數(shù):

間隔時長

計時器

根據(jù)流程圖的思路實現(xiàn)分流函數(shù)：

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

接下來，用編寫的節(jié)流函數(shù)實現(xiàn)上方案例

點擊運行案例

應(yīng)用場景

無限的滾動條

點擊運行案例

總結(jié)

節(jié)流和防抖類似，都能有效優(yōu)化系統(tǒng)性能，不過使用業(yè)務(wù)場景有所區(qū)別：

防抖既可用于在多次觸發(fā)的事件（如文本框逐個輸入文字），也可用于在頻繁觸發(fā)的事件（如調(diào)整窗口尺寸）。

節(jié)流多只用在頻繁觸發(fā)的事件（如滾動滾動條）上。

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

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

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

相關(guān)文章

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

    摘要：本文主要討論防抖，鏡像文章節(jié)流理解，實踐與實現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解防抖節(jié)流的讀者能夠有針對性地，逐一掌握它們。防抖是什么結(jié)合上方案例，防抖可以理解為多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次。 為了完整閱讀體驗，歡迎移步到我的博客原文。 防抖（去抖），以及節(jié)流（分流）在日常開發(fā)中可能用的不多，但在特定場景，卻十分有用。本文主要討論防抖，鏡像文章：節(jié)流 - 理解，...

    yangrd 評論0 收藏0

  • 節(jié)流和防抖動

    摘要：起因面試被問到了節(jié)流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學(xué)起首先先看字面意思節(jié)流的意思就是水龍頭關(guān)小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發(fā)生形變的那一刻舉個例子節(jié)流在改變窗口大小 起因 面試被問到了節(jié)流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學(xué)起 首先, 先看字面意思:節(jié)流(throttl...

    hellowoody 評論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

  • JavaScript 設(shè)計模式與開發(fā)實踐讀書筆記

    摘要：設(shè)計模式與開發(fā)實踐讀書筆記最近利用碎片時間在上面閱讀設(shè)計模式與開發(fā)實踐讀書這本書，剛開始閱讀前兩章內(nèi)容，和大家分享下我覺得可以在項目中用的上的一些筆記。事件綁定暫時這么多，以后會不定期更新一些關(guān)于我讀這本書的筆記內(nèi)容 JavaScript 設(shè)計模式與開發(fā)實踐讀書筆記 最近利用碎片時間在 Kindle 上面閱讀《JavaScript 設(shè)計模式與開發(fā)實踐讀書》這本書，剛開始閱讀前兩章內(nèi)容，...

    FingerLiu 評論0 收藏0

發(fā)表評論

0條評論

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