JS專(zhuān)題之節(jié)流函數(shù)

huaixiaoz 發(fā)布于2019-08-23 14:01 / 1476人閱讀

摘要：一什么是節(jié)流節(jié)流函數(shù)就是讓事件處理函數(shù)在大于等于執(zhí)行周期時(shí)才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會(huì)按每小段固定時(shí)間一次的頻率執(zhí)行。我們通過(guò)一個(gè)簡(jiǎn)單的示意來(lái)理解節(jié)流函數(shù)可以用時(shí)間戳和定時(shí)器兩種方式進(jìn)行處理。

本文共 2000 字，讀完只需 8 分鐘

上一篇文章講了去抖函數(shù)，然后這一篇講同樣為了優(yōu)化性能，降低事件處理頻率的節(jié)流函數(shù)。

一、什么是節(jié)流？

節(jié)流函數(shù)（throttle）就是讓事件處理函數(shù)（handler）在大于等于執(zhí)行周期時(shí)才能執(zhí)行，周期之內(nèi)不執(zhí)行，即事件一直被觸發(fā)，那么事件將會(huì)按每小段固定時(shí)間一次的頻率執(zhí)行。

打個(gè)比方：王者榮耀、英雄聯(lián)盟、植物大戰(zhàn)僵尸游戲中，技能的冷卻時(shí)間，技能的冷卻過(guò)程中，是無(wú)法使用技能的，只能等冷卻時(shí)間到之后才能執(zhí)行。

那什么樣的場(chǎng)景能用到節(jié)流函數(shù)呢？
比如：

頁(yè)面滾動(dòng)和改變大小時(shí)需要進(jìn)行業(yè)務(wù)處理，比如判斷是否滑到底部，然后進(jìn)行懶加載數(shù)據(jù)。

按鈕被高頻率地點(diǎn)擊時(shí)，比如游戲和搶購(gòu)網(wǎng)站。

我們通過(guò)一個(gè)簡(jiǎn)單的示意來(lái)理解：

節(jié)流函數(shù)可以用時(shí)間戳和定時(shí)器兩種方式進(jìn)行處理。

二、時(shí)間戳方式實(shí)現(xiàn)


    正在滑動(dòng)：0

看時(shí)間戳實(shí)現(xiàn)版本的效果：

三、定時(shí)器方式實(shí)現(xiàn)


    正在滑動(dòng): 0

看看定時(shí)器版實(shí)現(xiàn)版本的效果：

三、時(shí)間戳和定時(shí)器的對(duì)比分析

對(duì)比時(shí)間戳和定時(shí)器兩種方式，效果上的區(qū)別主要在于：

事件戳方式會(huì)立即執(zhí)行，定時(shí)器會(huì)在事件觸發(fā)后延遲執(zhí)行，而且事件停止觸發(fā)后還會(huì)再延遲執(zhí)行一次。

具體選擇哪種方式取決于使用場(chǎng)景。underscore 把這兩類(lèi)場(chǎng)景用 leading 和 trailing 進(jìn)行了表示。

四、兼容兩種方式, underscore 源碼實(shí)現(xiàn)

underscore 的源碼中就同時(shí)實(shí)現(xiàn)了時(shí)間戳和定時(shí)器實(shí)現(xiàn)方式，在調(diào)用時(shí)可以自由選擇要不要在間隔時(shí)間開(kāi)始時(shí)（leading）執(zhí)行，或是間隔時(shí)間結(jié)束后（trailing）執(zhí)行。

具體看偽代碼和示意圖：


        正在滑動(dòng): 0

下面是我畫(huà)的示意圖：

大致總結(jié)一下代碼對(duì)事件處理邏輯的影響：

如果 leading 為真，那么綠色意味著間隔時(shí)間的開(kāi)始會(huì)立即執(zhí)行，第一次觸發(fā)也會(huì)立即執(zhí)行。

如果 trailing 為真，那么從藍(lán)紫色的豎細(xì)線后的剩余事件，會(huì)跑一個(gè)定時(shí)器，定時(shí)器在時(shí)間間隔結(jié)束時(shí)再執(zhí)行一次事件處理函數(shù)。

如果 leading 不為真，那么第一次事件觸發(fā)不會(huì)立即執(zhí)行。

如果 trailing 不為真，最后一次事件觸發(fā)后，不然再執(zhí)行一次事件處理函數(shù)。

節(jié)流和去抖的常見(jiàn)場(chǎng)景

輸入框打字輸入完后才開(kāi)始異步請(qǐng)求數(shù)據(jù)校驗(yàn)內(nèi)容：去抖

下拉滾動(dòng)條判斷是否到底部，進(jìn)行懶加載數(shù)據(jù)：去抖和節(jié)流都可以，判斷是否到底的方式不同

活動(dòng)網(wǎng)站、游戲網(wǎng)站，按鈕被瘋狂點(diǎn)擊：節(jié)流

六、總結(jié)

去抖和節(jié)流函數(shù)都是為了降低高頻率事件觸發(fā)的事件處理頻率，從而優(yōu)化網(wǎng)頁(yè)中大量重繪重排帶來(lái)的性能問(wèn)題。

其區(qū)別在于去抖會(huì)在高頻率事件觸發(fā)時(shí)，只執(zhí)行一次，節(jié)流會(huì)在滿足間隔時(shí)間后執(zhí)行一次。去抖的 immediate，節(jié)流中的 leading, trailing 都是為了盡可能滿足這類(lèi)工具函數(shù)的不同使用場(chǎng)景。