資訊專欄INFORMATION COLUMN
摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時間一次的頻率執(zhí)行。我們通過一個簡單的示意來理解節(jié)流函數(shù)可以用時間戳和定時器兩種方式進(jìn)行處理。
本文共 2000 字，讀完只需 8 分鐘
上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。
節(jié)流函數(shù)（throttle）就是讓事件處理函數(shù)（handler）在大于等于執(zhí)行周期時才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會按每小段固定時間一次的頻率執(zhí)行。
打個比方：王者榮耀、英雄聯(lián)盟、植物大戰(zhàn)僵尸游戲中，技能的冷卻時間，技能的冷卻過程中，是無法使用技能的，只能等冷卻時間到之后才能執(zhí)行。
那什么樣的場景能用到節(jié)流函數(shù)呢？
比如：
頁面滾動和改變大小時需要進(jìn)行業(yè)務(wù)處理，比如判斷是否滑到底部，然后進(jìn)行懶加載數(shù)據(jù)。
按鈕被高頻率地點擊時，比如游戲和搶購網(wǎng)站。
我們通過一個簡單的示意來理解：
節(jié)流函數(shù)可以用時間戳和定時器兩種方式進(jìn)行處理。
二、時間戳方式實現(xiàn)正在滑動：0
看時間戳實現(xiàn)版本的效果：
正在滑動: 0
看看定時器版實現(xiàn)版本的效果：
對比時間戳和定時器兩種方式，效果上的區(qū)別主要在于：
事件戳方式會立即執(zhí)行，定時器會在事件觸發(fā)后延遲執(zhí)行，而且事件停止觸發(fā)后還會再延遲執(zhí)行一次。
具體選擇哪種方式取決于使用場景。underscore 把這兩類場景用 leading 和 trailing 進(jìn)行了表示。
四、兼容兩種方式, underscore 源碼實現(xiàn)underscore 的源碼中就同時實現(xiàn)了時間戳和定時器實現(xiàn)方式，在調(diào)用時可以自由選擇要不要在間隔時間開始時（leading）執(zhí)行，或是間隔時間結(jié)束后（trailing）執(zhí)行。
具體看偽代碼和示意圖：
正在滑動: 0
下面是我畫的示意圖：
大致總結(jié)一下代碼對事件處理邏輯的影響：
如果 leading 為真，那么綠色意味著間隔時間的開始會立即執(zhí)行，第一次觸發(fā)也會立即執(zhí)行。
如果 trailing 為真，那么從藍(lán)紫色的豎細(xì)線后的剩余事件，會跑一個定時器，定時器在時間間隔結(jié)束時再執(zhí)行一次事件處理函數(shù)。
如果 leading 不為真，那么第一次事件觸發(fā)不會立即執(zhí)行。
如果 trailing 不為真，最后一次事件觸發(fā)后，不然再執(zhí)行一次事件處理函數(shù)。
節(jié)流和去抖的常見場景
輸入框打字輸入完后才開始異步請求數(shù)據(jù)校驗內(nèi)容：去抖
下拉滾動條判斷是否到底部，進(jìn)行懶加載數(shù)據(jù)：去抖和節(jié)流都可以，判斷是否到底的方式不同
活動網(wǎng)站、游戲網(wǎng)站，按鈕被瘋狂點擊：節(jié)流
六、總結(jié)去抖和節(jié)流函數(shù)都是為了降低高頻率事件觸發(fā)的事件處理頻率，從而優(yōu)化網(wǎng)頁中大量重繪重排帶來的性能問題。
其區(qū)別在于去抖會在高頻率事件觸發(fā)時，只執(zhí)行一次，節(jié)流會在滿足間隔時間后執(zhí)行一次。去抖的 immediate，節(jié)流中的 leading, trailing 都是為了盡可能滿足這類工具函數(shù)的不同使用場景。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99956.html
摘要：如果本次定時器沒有被清除，時間到后就會自然執(zhí)行事件處理函數(shù)。綁定去抖后的事件回調(diào)函數(shù)綁定回調(diào)函數(shù)的屬性方法，點擊頁面，重置去抖效果異步請求清空上一次事件觸發(fā)的定時器重置為從而下一次事件觸發(fā)就能立即執(zhí)行。 一、前言 為什么會有去抖和節(jié)流這類工具函數(shù)？ 在用戶和前端頁面的交互過程中，很多操作的觸發(fā)頻率非常高，比如鼠標(biāo)移動 mousemove 事件, 滾動條滑動 scroll 事件, 輸...
摘要：寫在前面專題系列是我寫的第二個系列，第一個系列是深入系列。專題系列自月日發(fā)布第一篇文章，到月日發(fā)布最后一篇，感謝各位朋友的收藏點贊，鼓勵指正。 寫在前面 JavaScript 專題系列是我寫的第二個系列，第一個系列是 JavaScript 深入系列。 JavaScript 專題系列共計 20 篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖、節(jié)流、去重、類型判斷、拷貝、最值、扁平、柯里...
摘要：關(guān)于節(jié)流的實現(xiàn)，有兩種主流的實現(xiàn)方式，一種是使用時間戳，一種是設(shè)置定時器。當(dāng)觸發(fā)事件的時候，我們設(shè)置一個定時器，再觸發(fā)事件的時候，如果定時器存在，就不執(zhí)行，直到定時器執(zhí)行，然后執(zhí)行函數(shù)，清空定時器，這樣就可以設(shè)置下個定時器。 JavaScript 專題系列第二篇，講解節(jié)流，帶你從零實現(xiàn)一個 underscore 的 throttle 函數(shù) 前言 在《JavaScript專題之跟著und...
摘要：專題系列共計篇，主要研究日常開發(fā)中一些功能點的實現(xiàn)，比如防抖節(jié)流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數(shù)組合專題系列第十六篇，講解函數(shù)組合，并且使用柯里化和函數(shù)組合實現(xiàn)模式需求我們需要寫一個函數(shù)，輸入，返回。 JavaScript 專題之從零實現(xiàn) jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現(xiàn)一個 jQuery 的 ext...
閱讀 1031·2021-09-26 09:55
閱讀 3597·2021-09-24 10:30
閱讀 1381·2021-09-08 09:36
閱讀 2564·2021-09-07 09:58
閱讀 613·2019-08-30 15:56
閱讀 779·2019-08-29 18:32
閱讀 3640·2019-08-29 15:13
閱讀 1851·2019-08-29 13:49
