亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

layman / 1055人閱讀

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

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

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

點(diǎn)擊運(yùn)行案例

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

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

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

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

核心參數(shù):

間隔時(shí)長(zhǎng)

計(jì)時(shí)器

根據(jù)流程圖的思路實(shí)現(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
  }
}

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

點(diǎn)擊運(yùn)行案例

應(yīng)用場(chǎng)景

無(wú)限的滾動(dòng)條

點(diǎn)擊運(yùn)行案例

總結(jié)

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/109313.html

相關(guān)文章

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

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

    yangrd 評(píng)論0 收藏0

  • 節(jié)流和防抖動(dòng)

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

    hellowoody 評(píng)論0 收藏0

  • 「中高級(jí)前端面試」JavaScript手寫代碼無(wú)敵秘籍

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

    Zhuxy 評(píng)論0 收藏0

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

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

    FingerLiu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<