資訊專欄INFORMATION COLUMN
摘要：函數(shù)節(jié)流的實現(xiàn)函數(shù)節(jié)流最普通的實現(xiàn)就是通過取摩操作來過濾部分執(zhí)行。這樣子，就實現(xiàn)了函數(shù)節(jié)流，存在復(fù)雜計算的業(yè)務(wù)邏輯運行次數(shù)減半了。實現(xiàn)又叫函數(shù)節(jié)流，思路是控制某一個時間段執(zhí)行周期內(nèi)觸發(fā)的事件，只會執(zhí)行一次業(yè)務(wù)邏輯。
函數(shù)節(jié)流介紹
頁面在綁定resize，keydown或者mousemove這些能連續(xù)觸發(fā)的事件時，用戶只要很常規(guī)的操作，就能連續(xù)觸發(fā)多次綁定的方法。當(dāng)綁定方法里面存在大量的類似于DOM操作這種極其消耗性能的代碼時，會直接導(dǎo)致頁面運行的卡頓。這個時候就會用到函數(shù)節(jié)流。
函數(shù)節(jié)流的實現(xiàn)函數(shù)節(jié)流最普通的實現(xiàn)就是通過取摩操作來過濾部分執(zhí)行。參考代碼如下
javascriptvar mousemoveCount = 0;
function mousemoveListener(e){
mousemoveCount++;
if(mousemoveCount % 2 === 0){
return;
}
console.info("業(yè)務(wù)邏輯");
}
當(dāng)?shù)谝淮斡|發(fā)并執(zhí)行mousemoveListener事件時，會打印“業(yè)務(wù)邏輯”；緊接著第二次執(zhí)行mousemoveListener事件時，由于mousemoveCount為2，會直接return掉，并不會打印“業(yè)務(wù)邏輯”。這樣子，就實現(xiàn)了函數(shù)節(jié)流，存在復(fù)雜計算的業(yè)務(wù)邏輯運行次數(shù)減半了。
但是這種實現(xiàn)存在兩個問題：
方法的執(zhí)行頻率（或者說幀率）是不可控的。比如mousemove事件，執(zhí)行頻率由鼠標(biāo)移動速度決定，由上面這種方式實現(xiàn)，頻率還是由鼠標(biāo)移動速度決定。
最后一次觸發(fā)可能未執(zhí)行。比如當(dāng)最后一次觸發(fā)事件時，mousemoveCount是偶數(shù)，那么會直接return。如果業(yè)務(wù)需要最后一次必須執(zhí)行業(yè)務(wù)邏輯，則會存在bug。
所以就有了下面的優(yōu)化實現(xiàn)(throttle和debounce)。
throttle實現(xiàn)throttle又叫函數(shù)節(jié)流，思路是控制某一個時間段(執(zhí)行周期)內(nèi)觸發(fā)的事件，只會執(zhí)行一次業(yè)務(wù)邏輯。代碼如下：
javascriptvar lastMousemoveTime = 0, mousemoveTime = 100;
function mousemoveListener(e){
var now = new Date().getTime();
if(now - lastMousemoveTime <= mousemoveTime) {
return;
}
lastMousemoveTime = now;
setTimeout(function(){
console.info("業(yè)務(wù)邏輯");
}, mousemoveTime);
}
第一次觸發(fā)mousemove會設(shè)置100ms后執(zhí)行業(yè)務(wù)邏輯，在這之后的100ms里面觸發(fā)的mousemove都不會觸發(fā)業(yè)務(wù)邏輯。相當(dāng)于控制了mousemove事件100ms觸發(fā)一次，也就是10幀。
使用這種實現(xiàn)(throttle)，可以做到觸發(fā)頻率可控。但當(dāng)業(yè)務(wù)希望連續(xù)的觸發(fā)事件只在之后一次觸發(fā)后才執(zhí)行業(yè)務(wù)邏輯，比如resize事件，只希望窗口變化結(jié)束后才進行業(yè)務(wù)邏輯的運行，throttle實現(xiàn)就不適用了。這個時候就需要使用到debounce
debounce實現(xiàn)debounce又叫函數(shù)去抖動，思路是業(yè)務(wù)邏輯在resize不在觸發(fā)后才執(zhí)行。代碼如下：
javascriptvar resizeTimer = null;
function resizeListener(e){
if(resizeTimer) {
clearTimerout(resizeTimer);
}
resizeTimer = setTimeout(function(){
console.info("業(yè)務(wù)邏輯");
}, 100);
}
但resize連續(xù)快速觸發(fā)時，業(yè)務(wù)邏輯并不會執(zhí)行。只有當(dāng)最后一次觸發(fā)resize后100ms，才執(zhí)行業(yè)務(wù)邏輯。這種情況就能實現(xiàn)只在最后一次resize觸發(fā)業(yè)務(wù)計算了。
underscore 中已經(jīng)對throttle和debounce做了實現(xiàn)和封裝， 有興趣可以去查看源碼。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85656.html
摘要：若時間差大于間隔時間，則立刻執(zhí)行一次函數(shù)。不同點函數(shù)防抖，在一段連續(xù)操作結(jié)束后，處理回調(diào)，利用和實現(xiàn)。函數(shù)防抖關(guān)注一定時間連續(xù)觸發(fā)的事件只在最后執(zhí)行一次，而函數(shù)節(jié)流側(cè)重于一段時間內(nèi)只執(zhí)行一次。 原博客地址，歡迎star 函數(shù)防抖和節(jié)流 函數(shù)防抖和函數(shù)節(jié)流：優(yōu)化高頻率執(zhí)行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標(biāo)的mousemove、mouseover...
摘要：函數(shù)節(jié)流的原理函數(shù)節(jié)流的原理挺簡單的，估計大家都想到了，那就是定時器。在高級程序設(shè)計一書有介紹函數(shù)節(jié)流，里面封裝了這樣一個函數(shù)節(jié)流函數(shù)，它把定時器存為函數(shù)的一個屬性個人的世界觀不喜歡這種寫法。 什么是函數(shù)節(jié)流？ 介紹前，先說下背景。在前端開發(fā)中，有時會為頁面綁定resize事件，或者為一個頁面元素綁定拖拽事件（其核心就是綁定mousemove），這種事件有一個特點，就是用戶不必特地?fù)v亂...
摘要：函數(shù)節(jié)流和去抖的出現(xiàn)場景，一般都伴隨著客戶端的事件監(jiān)聽。函數(shù)節(jié)流的核心是，讓一個函數(shù)不要執(zhí)行得太頻繁，減少一些過快的調(diào)用來節(jié)流。 概述 也是好久沒更新 源碼解讀，看著房價蹭蹭暴漲，心里也是五味雜陳，對未來充滿恐懼和迷茫 ...（敢問一句你們上岸了嗎） 言歸正傳，今天要介紹的是 underscore 中兩個重要的方法，函數(shù)節(jié)流和函數(shù)去抖。這篇文章不會涉及具體的代碼實現(xiàn)（關(guān)于代碼實現(xiàn)請期...
摘要：函數(shù)節(jié)流函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。函數(shù)防抖函數(shù)在特定的時間內(nèi)不被再調(diào)用后執(zhí)行。一句話概括函數(shù)節(jié)流是從用戶開始輸入就開始計時，而函數(shù)節(jié)流是從用戶停止輸入開始計時。 函數(shù)節(jié)流 & 函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖 函數(shù)節(jié)流和函數(shù)防抖二者很容易被混淆起來。下面貼英文原文，建議認(rèn)真閱讀：Debouncing enforces that a function ...
摘要：為了解決這些問題，就可以使用定時器對函數(shù)進行節(jié)流。第一次調(diào)用函數(shù)，創(chuàng)建一個定時器，在指定的時間間隔之后運行代碼。當(dāng)?shù)诙握{(diào)用該函數(shù)時，它會清除前一次的定時器并設(shè)置另一個。 函數(shù)節(jié)流的目的 從字面上就可以理解，函數(shù)節(jié)流就是用來節(jié)流函數(shù)從而一定程度上優(yōu)化性能的。例如，DOM 操作比起非DOM 交互需要更多的內(nèi)存和CPU 時間。連續(xù)嘗試進行過多的DOM 相關(guān)操作可能會導(dǎo)致瀏覽器掛起，有時候甚...
摘要：隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時間段內(nèi)，函數(shù)被頻繁調(diào)用執(zhí)行，通過時間頻率控制，減少回調(diào)函數(shù)執(zhí)行次數(shù)，來實現(xiàn)相關(guān)性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...
閱讀 1011·2023-04-25 19:35
閱讀 2675·2021-11-22 09:34
閱讀 3708·2021-10-09 09:44
閱讀 1733·2021-09-22 15:25
閱讀 2947·2019-08-29 14:00
閱讀 3382·2019-08-29 11:01
閱讀 2609·2019-08-26 13:26
閱讀 1745·2019-08-23 18:08
