詳談js防抖和節(jié)流

shevy 發(fā)布于2019-08-23 13:54 / 555人閱讀

摘要：本文會分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

本文由小芭樂發(fā)表

0. 引入

首先舉一個(gè)例子：

模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節(jié)流的效果，這里附上完整可執(zhí)行代碼：





    
    沒有防抖
    
    



    
        1.沒有防抖的輸入：

效果：在輸入框里輸入一個(gè)，就會觸發(fā)一次“ajax請求”（此處是console）。

沒有防抖和節(jié)流

缺點(diǎn)：浪費(fèi)請求資源，可以加入防抖和節(jié)流來優(yōu)化一下。

本文會分別介紹什么是防抖和節(jié)流，它們的應(yīng)用場景，和實(shí)現(xiàn)方式。防抖和節(jié)流都是為了解決短時(shí)間內(nèi)大量觸發(fā)某函數(shù)而導(dǎo)致的性能問題，比如觸發(fā)頻率過高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。但二者應(yīng)對的業(yè)務(wù)需求不一樣，所以實(shí)現(xiàn)的原理也不一樣，下面具體來看看吧。

1. 防抖（debounce） 1.1 什么是防抖

在事件被觸發(fā)n秒后再執(zhí)行回調(diào)函數(shù)，如果在這n秒內(nèi)又被觸發(fā)，則重新計(jì)時(shí)。

1.2 應(yīng)用場景

(1) 用戶在輸入框中連續(xù)輸入一串字符后，只會在輸入完后去執(zhí)行最后一次的查詢ajax請求，這樣可以有效減少請求次數(shù)，節(jié)約請求資源；

(2) window的resize、scroll事件，不斷地調(diào)整瀏覽器的窗口大小、或者滾動時(shí)會觸發(fā)對應(yīng)事件，防抖讓其只觸發(fā)一次；

1.3 實(shí)現(xiàn)

還是上述列子，這里加入防抖來優(yōu)化一下，完整代碼如下：





    
    加入防抖
    
    



    
        2.加入防抖后的輸入：

代碼說明：

1.每一次事件被觸發(fā)，都會清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。這就會導(dǎo)致每一次高頻事件都會取消前一次的超時(shí)調(diào)用，導(dǎo)致事件處理程序不能被觸發(fā)；

2.只有當(dāng)高頻事件停止，最后一次事件觸發(fā)的超時(shí)調(diào)用才能在delay時(shí)間后執(zhí)行；

效果：

加入防抖后，當(dāng)持續(xù)在輸入框里輸入時(shí)，并不會發(fā)送請求，只有當(dāng)在指定時(shí)間間隔內(nèi)沒有再輸入時(shí)，才會發(fā)送請求。如果先停止輸入，但是在指定間隔內(nèi)又輸入，會重新觸發(fā)計(jì)時(shí)。

加入防抖

2.節(jié)流（throttle） 2.1 什么是節(jié)流

規(guī)定一個(gè)單位時(shí)間，在這個(gè)單位時(shí)間內(nèi)，只能有一次觸發(fā)事件的回調(diào)函數(shù)執(zhí)行，如果在同一個(gè)單位時(shí)間內(nèi)某事件被觸發(fā)多次，只有一次能生效。

2.2 應(yīng)用場景

(1)鼠標(biāo)連續(xù)不斷地觸發(fā)某事件（如點(diǎn)擊），只在單位時(shí)間內(nèi)只觸發(fā)一次；

(2)在頁面的無限加載場景下，需要用戶在滾動頁面時(shí)，每隔一段時(shí)間發(fā)一次 ajax 請求，而不是在用戶停下滾動頁面操作時(shí)才去請求數(shù)據(jù)；

(3)監(jiān)聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷；

2.3 實(shí)現(xiàn)

還是上述列子，這里加入節(jié)流來優(yōu)化一下，完整代碼如下：





    
    加入節(jié)流
    
    



    
        3.加入節(jié)流后的輸入：

效果：實(shí)驗(yàn)可發(fā)現(xiàn)在持續(xù)輸入時(shí)，會安裝代碼中的設(shè)定，每1秒執(zhí)行一次ajax請求

加入節(jié)流

3. 小結(jié)

總結(jié)下防抖和節(jié)流的區(qū)別：

-- 效果：

函數(shù)防抖是某一段時(shí)間內(nèi)只執(zhí)行一次；而函數(shù)節(jié)流是間隔時(shí)間執(zhí)行，不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時(shí)間內(nèi)一定會執(zhí)行一次真正的事件處理函數(shù)。

-- 原理：

防抖是維護(hù)一個(gè)計(jì)時(shí)器，規(guī)定在delay時(shí)間后觸發(fā)函數(shù)，但是在delay時(shí)間內(nèi)再次觸發(fā)的話，都會清除當(dāng)前的 timer 然后重新設(shè)置超時(shí)調(diào)用，即重新計(jì)時(shí)。這樣一來，只有最后一次操作能被觸發(fā)。

節(jié)流是通過判斷是否到達(dá)一定時(shí)間來觸發(fā)函數(shù)，若沒到規(guī)定時(shí)間則使用計(jì)時(shí)器延后，而下一次事件則會重新設(shè)定計(jì)時(shí)器。

如有問題，歡迎指正。

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請點(diǎn)擊

搜索關(guān)注公眾號「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！