資訊專欄INFORMATION COLUMN
摘要：防抖和節(jié)流連續(xù)觸發(fā)觸發(fā)頻率很高的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。節(jié)流防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時(shí)間。
防抖（debounce）和節(jié)流（throttle）
連續(xù)觸發(fā)（觸發(fā)頻率很高）的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。
常見(jiàn)的需要優(yōu)化的事件：
鼠標(biāo)事件:
mousemove（拖拽）
mouseover(劃過(guò))
mouseWheel(滾屏)
鍵盤(pán)事件：
keydown(按下鍵盤(pán))
keypress（按下字符鍵盤(pán)）
keyup(彈起鍵盤(pán))
window resize/scroll
DOM 元素動(dòng)態(tài)定位
優(yōu)化方式是控制事件處理器在一段時(shí)間內(nèi)的執(zhí)行次。
防抖頻繁（連續(xù)）觸發(fā)事件（比如用戶觸發(fā)輸入事件input），不執(zhí)行目標(biāo)動(dòng)作，當(dāng)不在觸發(fā)事件了，再執(zhí)行。
實(shí)現(xiàn)思路，在事件處理器內(nèi)，使用 setTimeout 包裹目標(biāo)動(dòng)作，一直觸發(fā)事件，就清除上次的定時(shí)器，不再觸發(fā)觸發(fā)事件，會(huì)執(zhí)行最后一個(gè)定時(shí)器，目標(biāo)動(dòng)作也執(zhí)行一次了。
JS代碼：
function debounce(callback, delay) {
let timeout = 0;
return e => {
console.log("清除", timeout, new Date());
clearTimeout(timeout); //input 一直觸發(fā)，就清除上一次的定時(shí)器，防止執(zhí)行目標(biāo)函數(shù)，直到事件不觸發(fā)事件，最后一個(gè)定時(shí)器沒(méi)有清除，delay 時(shí)間后就會(huì)執(zhí)定時(shí)器，就確保了目標(biāo)函數(shù)只執(zhí)行一次。
timeout = setTimeout(() => {
callback(e);
}, delay);
console.log("新的", timeout, e.target.value, new Date());
};
}
let print = debounce(e => {
let value = e.target.value;
console.log(value, new Date());
}, 1000);
document
.querySelector("#input")
.addEventListener("input", print, false);
清除定時(shí)器的時(shí)機(jī)很關(guān)鍵，在新定時(shí)器生成之前，如果在之后，會(huì)將所有定時(shí)器都清除，目標(biāo)函數(shù)一次都不執(zhí)行。
節(jié)流防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時(shí)間。而節(jié)流是在一段時(shí)間內(nèi)，確保目標(biāo)函數(shù)只執(zhí)行一次，實(shí)現(xiàn)緩慢執(zhí)行目標(biāo)函數(shù)的效果。
上面的輸入使用節(jié)流實(shí)現(xiàn)：
let thorttle = (callback, delay) => {
let timeout = 0;
let now = new Date() - 0;
return e => {
console.log("now", now);
let last = new Date() - 0;
clearTimeout(timeout);
if (last - now >= delay) {
console.log("時(shí)間間隔", last - now);
callback(e);
now = last;//將上執(zhí)行的時(shí)間賦值給 now
} else {
//將 delay 時(shí)間內(nèi)多次觸發(fā)事件，目標(biāo)函數(shù)合并到這里執(zhí)行
timeout = setTimeout(() => {
callback(e);
}, delay);
}
};
};
let write = thorttle(e => {
console.log(e.target.value, new Date());
}, 5000);
document
.querySelector("#input")
.addEventListener("input", write, false);
兩者比較
節(jié)流在某個(gè)時(shí)間段內(nèi)，目標(biāo)函數(shù)能執(zhí)行一次，限制目標(biāo)函數(shù)的執(zhí)行頻率，不管事件觸發(fā)了多少次；
防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)了這些事件用了多少時(shí)間。
節(jié)流函數(shù)限制目標(biāo)函數(shù)的執(zhí)行頻率，有連續(xù)變化的效果，適用于關(guān)注變化過(guò)程的操作，可以調(diào)整目標(biāo)函數(shù)執(zhí)行頻率使得變化更加平滑，比如動(dòng)畫(huà)、改變窗口時(shí)執(zhí)行某些操作等，常用事件resize、scroll、mouseWheel、touchmove、mouseover等；
防抖函數(shù)適用于更關(guān)注結(jié)果的操作，不太關(guān)注操作過(guò)程，常見(jiàn)的事件有 input、keyup等。
最后看一個(gè) 將 防抖 和 節(jié)流都用 resize 事件的效果，更能體會(huì)兩者的區(qū)別：
function debounce(callback, delay) {
let timeout = 0;
return e => {
clearTimeout(timeout);
timeout = setTimeout(() => {
callback(e);
}, delay);
};
}
let print = debounce(e => {
let value = e.target.value;
console.log("debounce", window.innerWidth);
}, 500);
let thorttle = (callback, delay) => {
let timeout = 0;
let now = new Date() - 0;
return e => {
let last = new Date() - 0;
clearTimeout(timeout);
if (last - now >= delay) {
callback(e);
now = last;
} else {
timeout = setTimeout(() => {
callback(e);
}, delay);
}
};
};
let write = thorttle(e => {
console.log("thorttle", window.innerWidth);
}, 500);
window.addEventListener("resize", write, false);
window.addEventListener("resize", print, false);
參考
函數(shù)節(jié)流與函數(shù)防抖
函數(shù)防抖與函數(shù)節(jié)流
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104855.html
摘要：防抖和節(jié)流連續(xù)觸發(fā)觸發(fā)頻率很高的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。節(jié)流防抖是多次觸發(fā)事件，目標(biāo)函數(shù)只執(zhí)行一次，不管觸發(fā)這些事件用了多少時(shí)間。 防抖（debounce）和節(jié)流（throttle） 連續(xù)觸發(fā)（觸發(fā)頻率很高）的時(shí)間，不進(jìn)行優(yōu)化，會(huì)出現(xiàn)頁(yè)面卡頓現(xiàn)象。常見(jiàn)的需要優(yōu)化的事件： 鼠標(biāo)事件: mousemove（拖拽） mouseover(劃過(guò)) mouseWheel(滾屏)...
摘要：節(jié)流在指定時(shí)間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對(duì)于一定時(shí)間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。總結(jié)以上只是很簡(jiǎn)單的寫(xiě)了一下節(jié)流和防抖的原理，在里，實(shí)現(xiàn)起來(lái)更加復(fù)雜，但是背后的原理核心就是上邊代碼寫(xiě)的。 概述 在平時(shí)的開(kāi)發(fā)中，經(jīng)常會(huì)聽(tīng)到兩個(gè)差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個(gè)類似又有些不同的優(yōu)化方案。 節(jié)流：在指定時(shí)間之內(nèi)，讓函數(shù)只觸發(fā)一次。 防...
摘要：防抖函數(shù)防抖和節(jié)流是一對(duì)常常被放在一起的場(chǎng)景。同時(shí)，這里會(huì)設(shè)置一個(gè)定時(shí)器，在等待后會(huì)執(zhí)行，的主要作用就是觸發(fā)。最后，如果不再有函數(shù)調(diào)用，就會(huì)在定時(shí)器結(jié)束時(shí)執(zhí)行。 函數(shù)節(jié)流和去抖的出現(xiàn)場(chǎng)景，一般都伴隨著客戶端 DOM 的事件監(jiān)聽(tīng)。比如scroll resize等事件，這些事件在某些場(chǎng)景觸發(fā)非常頻繁。 比如，實(shí)現(xiàn)一個(gè)原生的拖拽功能（不能用 H5 Drag&Drop API），需要一路監(jiān)聽(tīng)...
摘要：相反，在討論時(shí)，面試中通常會(huì)提到三件事。而認(rèn)為最后一個(gè)參賽者說(shuō)了算，只要還能吃的，就重新設(shè)定新的定時(shí)器。試想，如果用戶的操作十分頻繁他每次都不等設(shè)置的時(shí)間結(jié)束就進(jìn)行下一次操作，于是每次都為該用戶重新生成定時(shí)器，回調(diào)函數(shù)被延遲了不計(jì)其數(shù)次。本文不是討論最新的 JavaScript 庫(kù)、常見(jiàn)的開(kāi)發(fā)實(shí)踐或任何新的 ES6 函數(shù)。相反，在討論 JavaScript 時(shí)，面試中通常會(huì)提到三件事。我自己...
摘要：當(dāng)?shù)诙握{(diào)用該函數(shù)時(shí)，它會(huì)清除前一次的定時(shí)器并設(shè)置另一個(gè)。然而，如果前一個(gè)定時(shí)器尚未執(zhí)行，其實(shí)就是將其替換為一個(gè)新的定時(shí)器，然后延遲一定時(shí)間再執(zhí)行。參考文章函數(shù)節(jié)流與函數(shù)防抖函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場(chǎng)景辨析函數(shù)節(jié)流函數(shù)防抖實(shí)現(xiàn)原理分析 前言 事件的觸發(fā)權(quán)很多時(shí)候都屬于用戶，有些情況下會(huì)產(chǎn)生問(wèn)題： 向后臺(tái)發(fā)送數(shù)據(jù)，用戶頻繁觸發(fā)，對(duì)服務(wù)器造成壓力 一些瀏覽器事件:window.onresi...
閱讀 2732·2021-11-22 13:52
閱讀 1199·2021-10-14 09:43
閱讀 3653·2019-08-30 15:56
閱讀 2961·2019-08-30 13:22
閱讀 3286·2019-08-30 13:10
閱讀 1572·2019-08-26 13:45
閱讀 1108·2019-08-26 11:47
閱讀 2803·2019-08-23 18:13
