第JS中節(jié)流和防抖函數(shù)的實(shí)現(xiàn)及區(qū)別示例目錄引言一、概念二、實(shí)現(xiàn)三、區(qū)別四、Lodash4-1.throttle4-2.debounce五、使用場(chǎng)景六、總結(jié)

引言

在前端開(kāi)發(fā)中，經(jīng)常和DOM、BOM打交道，例如：窗口的resize、scroll，輸入框內(nèi)容校驗(yàn)，按鈕點(diǎn)擊等等操作時(shí)，如果事件處理函數(shù)調(diào)用的頻率無(wú)限制，會(huì)加重瀏覽器的負(fù)擔(dān)，導(dǎo)致用戶體驗(yàn)非常糟糕。

此時(shí)我們可以采用throttle（節(jié)流）和debounce（防抖）的方式來(lái)減少調(diào)用頻率，提高性能的同時(shí)又不影響實(shí)際效果。

一、概念

函數(shù)節(jié)流(throttle)：高頻事件觸發(fā)，但在n秒內(nèi)只會(huì)執(zhí)行一次，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率。函數(shù)防抖(debounce)：觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間。函數(shù)節(jié)流（throttle）與函數(shù)防抖（debounce）都是為了限制函數(shù)的執(zhí)行頻次，以?xún)?yōu)化函數(shù)觸發(fā)頻率過(guò)高導(dǎo)致的響應(yīng)速度跟不上觸發(fā)頻率，出現(xiàn)延遲，假死或卡頓的現(xiàn)象。

二、實(shí)現(xiàn)

函數(shù)節(jié)流(throttle)

實(shí)現(xiàn)方式：每次觸發(fā)事件時(shí)，如果當(dāng)前有等待執(zhí)行的延時(shí)函數(shù)，則直接return。

//節(jié)流throttle代碼

functionthrottle(fn,delay){

letcanRun=true;//通過(guò)閉包保存一個(gè)標(biāo)記

returnfunction(){

//在函數(shù)開(kāi)頭判斷標(biāo)記是否為true，不為true則return

if(!canRun)return;

//立即設(shè)置為false

canRun=false;

//將外部傳入的函數(shù)的執(zhí)行放在setTimeout中

setTimeout(()={

//最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true(關(guān)鍵)表示可以執(zhí)行下一次循環(huán)了。

//當(dāng)定時(shí)器沒(méi)有執(zhí)行的時(shí)候標(biāo)記永遠(yuǎn)是false，在開(kāi)頭被return掉

fn.apply(this,arguments);

canRun=true;

},delay);

functionlog(e){

console.log('節(jié)流：',e.target.innerWidth,e.target.innerHeight);

window.addEventListener('resize',throttle(log,500));

函數(shù)防抖(debounce)

實(shí)現(xiàn)方式：每次觸發(fā)事件時(shí)設(shè)置一個(gè)延遲調(diào)用方法，并且取消之前的延時(shí)調(diào)用方法。

缺點(diǎn)：如果事件在規(guī)定的時(shí)間間隔內(nèi)被不斷的觸發(fā)，則調(diào)用方法會(huì)被不斷的延遲。

//防抖debounce代碼

functiondebounce(fn,delay){

vartimeout=null;//創(chuàng)建一個(gè)標(biāo)記用來(lái)存放定時(shí)器的返回值

returnfunction(e){

//每當(dāng)用戶輸入的時(shí)候把前一個(gè)setTimeoutclear掉

clearTimeout(timeout);

//然后又創(chuàng)建一個(gè)新的setTimeout,這樣就能保證interval間隔內(nèi)如果時(shí)間持續(xù)觸發(fā)，就不會(huì)執(zhí)行fn函數(shù)

timeout=setTimeout(()={

fn.apply(this,arguments);

},delay);

//處理函數(shù)

functionrun(){

console.log('防抖：',Math.random());

//滾動(dòng)事件

window.addEventListener('scroll',debounce(run,500));

三、區(qū)別

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

比如在頁(yè)面的無(wú)限加載場(chǎng)景下，我們需要用戶在滾動(dòng)頁(yè)面時(shí)，每隔一段時(shí)間發(fā)一次Ajax請(qǐng)求，而不是在用戶停下滾動(dòng)頁(yè)面操作時(shí)才去請(qǐng)求數(shù)據(jù)。這樣的場(chǎng)景，就適合用節(jié)流技術(shù)來(lái)實(shí)現(xiàn)。

四、Lodash

Lodash是一個(gè)一致性、模塊化、高性能的JavaScript實(shí)用工具庫(kù)。其中就封裝好了節(jié)流函數(shù)throttle和防抖函數(shù)debounce。

4-1.throttle

參數(shù)：

func(Function):要節(jié)流的函數(shù)。

[wait=0](number):需要節(jié)流的毫秒。

[options=](Object):選項(xiàng)對(duì)象。

[options.leading=true](boolean):指定調(diào)用在節(jié)流開(kāi)始前。

[options.trailing=true](boolean):指定調(diào)用在節(jié)流結(jié)束后。

返回：(Function):返回節(jié)流的函數(shù)。

例子：

//避免在滾動(dòng)時(shí)過(guò)分的更新定位

jQuery(window).on('scroll',_.throttle(updatePosition,100));

//點(diǎn)擊后就調(diào)用`renewToken`，但5分鐘內(nèi)超過(guò)1次。

varthrottled=_.throttle(renewToken,300000,{'trailing':false});

jQuery(element).on('click',throttled);

//取消一個(gè)trailing的節(jié)流調(diào)用。

jQuery(window).on('popstate',throttled.cancel);

4-2.debounce

參數(shù)：

func(Function):要防抖動(dòng)的函數(shù)。

[wait=0](number):需要延遲的毫秒數(shù)。

[options=](Object):選項(xiàng)對(duì)象。

[options.leading=false](boolean):指定在延遲開(kāi)始前調(diào)用。

[options.maxWait](number):設(shè)置func允許被延遲的最大值。

[options.trailing=true](boolean):指定在延遲結(jié)束后調(diào)用。

返回：(Function):返回新的debounced（防抖動(dòng)）函數(shù)。

例子：

//避免窗口在變動(dòng)時(shí)出現(xiàn)昂貴的計(jì)算開(kāi)銷(xiāo)。

jQuery(window).on('resize',_.debounce(calculateLayout,150));

//當(dāng)點(diǎn)擊時(shí)`sendMail`隨后就被調(diào)用。

jQuery(element).on('click',_.debounce(sendMail,300,{

'leading':true,

'trailing':false

//確保`batchLog`調(diào)用1次之后，1秒內(nèi)會(huì)被觸發(fā)。

vardebounced=_.debounce(batchLog,250,{'maxWait':1000});

varsource=newEventSource('/stream');

jQuery(source).on('message',debounced);

//取消一個(gè)trailing的防抖動(dòng)調(diào)用

jQuery(window).on('popstate',debounced.cancel);

五、使用場(chǎng)景

resize事件監(jiān)聽(tīng)瀏覽器屏幕寬高，自適應(yīng)適配操作scroll事件監(jiān)聽(tīng)屏幕滾動(dòng)，如：導(dǎo)航欄/Tab欄動(dòng)態(tài)置頂、下拉刷新、上劃加載更多表單的input事件查詢(xún)接口獲取數(shù)據(jù)tab切換頻率控制，防止頻繁點(diǎn)擊過(guò)快Echart圖表中tooltip.formatter方法

六、總結(jié)

1.節(jié)流：

使得一定時(shí)間內(nèi)只觸發(fā)一次函數(shù)。原理是通過(guò)判斷是否有延遲調(diào)