在 JavaScript 中,防抖(debounce)和節(jié)流(throttle)是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都能提高響應(yīng)速度,但實(shí)現(xiàn)方式和應(yīng)用場景略有不同。
防抖(debounce):
防抖的核心思想是在一定時(shí)間內(nèi),事件被連續(xù)觸發(fā)時(shí),只執(zhí)行最后一次觸發(fā)的事件處理函數(shù)。適用于如輸入框?qū)崟r(shí)搜索、窗口大小調(diào)整等場景。
實(shí)現(xiàn)方式:
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
節(jié)流(throttle):
節(jié)流的核心思想是在一定時(shí)間內(nèi),事件被連續(xù)觸發(fā)時(shí),只執(zhí)行一次事件處理函數(shù)。適用于如滾動(dòng)加載、鼠標(biāo)移動(dòng)等場景。
實(shí)現(xiàn)方式:
function throttle(func, wait) {
let lastTime = 0;
return function () {
const context = this;
const args = arguments;
const nowTime = Date.now();
if (nowTime - lastTime > wait) {
func.apply(context, args);
lastTime = nowTime;
}
};
}
如何提高響應(yīng)速度:
減少事件處理函數(shù)的執(zhí)行時(shí)間:通過優(yōu)化代碼邏輯、減少不必要的計(jì)算,提高事件處理函數(shù)的執(zhí)行效率。
使用防抖或節(jié)流技術(shù):在高頻率觸發(fā)事件的情況下,使用防抖或節(jié)流技術(shù)可以減少事件處理函數(shù)的執(zhí)行次數(shù),從而提高響應(yīng)速度。
避免不必要的 DOM 操作:在處理與 DOM 相關(guān)的事件時(shí),盡量減少不必要的 DOM 操作,例如避免頻繁的樣式修改、元素增刪等。
使用 requestAnimationFrame:在進(jìn)行動(dòng)畫或需要實(shí)時(shí)更新的場景中,使用 requestAnimationFrame 可以讓瀏覽器在下一次重繪之前執(zhí)行指定的回調(diào)函數(shù),從而提高渲染性能。