JavaScript中函數(shù)防抖、節(jié)流
來源 | https://www.cnblogs.com/echoyya/p/14565642.html
函數(shù)節(jié)流和函數(shù)防抖，兩者都是優(yōu)化高頻率執(zhí)行js代碼的一種手段。
以監(jiān)聽頁面滾動(dòng)為例，分別看一下普通滾動(dòng)，函數(shù)節(jié)流，函數(shù)防抖三者的實(shí)現(xiàn)效果。
函數(shù)節(jié)流
比如人眨眼睛，就是一定時(shí)間內(nèi)眨一次。 再比如就是游戲中的技能CD，按下技能以后，再規(guī)定的時(shí)間內(nèi)，你再按也沒用，只能冷卻好了再按。
// 函數(shù)防抖var timer = false;document.getElementById("debounce").onscroll = function(){clearTimeout(timer); // 清除未執(zhí)行的代碼，重置回初始化狀態(tài)timer = setTimeout(function(){console.log("函數(shù)防抖");}, 1000);};
函數(shù)防抖的要點(diǎn)：也需要一個(gè)定時(shí)器來輔助實(shí)現(xiàn)代碼延遲執(zhí)行。如果計(jì)時(shí)未完之前，方法被多次觸發(fā)，則清除上次記錄的定時(shí)器標(biāo)記，重新開始。
若計(jì)時(shí)完畢，沒有繼續(xù)觸發(fā)方法，則執(zhí)行邏輯代碼。
監(jiān)聽id = debounce元素的滾動(dòng)事件，首先就是清除上次未執(zhí)行的setTimeout的引用timer
clearTimeout方法，允許傳入無效的值。所以直接執(zhí)行clearTimeout即可。
將需要執(zhí)行的代碼放入setTimeout定時(shí)器中，再返回定時(shí)器引用給timer緩存。
如果倒計(jì)時(shí)結(jié)束，沒有新的方法觸發(fā)滾動(dòng)事件，則執(zhí)行setTimeout中的代碼。
函數(shù)防抖的原理，就是巧用setTimeout做緩存池，并且可以輕易地清除待執(zhí)行代碼。
函數(shù)防抖
函數(shù)防抖,是指觸發(fā)高頻事件n秒后函數(shù)會(huì)執(zhí)行一次，如果n秒內(nèi)高頻事件被再次觸發(fā)，則重新計(jì)算時(shí)間；在整個(gè)過程中，事件函數(shù)只會(huì)被執(zhí)行一次。
比如坐公交，在一定時(shí)間內(nèi)，如果有人陸續(xù)刷卡上車，司機(jī)就不會(huì)開車。只有沒有人再刷卡了，司機(jī)才開車。
再比如游戲中的buff，吃了bull，開始倒計(jì)時(shí)，此時(shí)又吃了一個(gè)buff，則重新記時(shí)。
使用場(chǎng)景：click、onMouseOver，onMouseMove，resize，input，scroll等
// 函數(shù)節(jié)流var canRun = true;document.getElementById("throttle").onscroll = function(){if(!canRun){// 判斷是否已空閑，如果在執(zhí)行中，則直接returnreturn;}canRun = false;setTimeout(function(){console.log("函數(shù)節(jié)流");canRun = true;}, 1000);}
監(jiān)聽id = throttle元素的滾動(dòng)事件。當(dāng)canRun為true，代表當(dāng)前滾動(dòng)處理事件是空閑的，可以使用。然后下一步的操作就是canRun=false。這樣其他請(qǐng)求執(zhí)行滾動(dòng)事件的方法，就被return。 setTimeout設(shè)置1000ms時(shí)間間隔，執(zhí)行定時(shí)器中的回調(diào)函數(shù)，釋放標(biāo)志位，允許執(zhí)行下一次滾動(dòng)事件。 若具體執(zhí)行的方法是一個(gè)回調(diào)函數(shù)，也可以將canRun=true放到callback中。只要理解了函數(shù)節(jié)流基本原理，改造就會(huì)得心應(yīng)手。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
