在 JavaScript 中,防抖(debounce)和節(jié)流(throttle)是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以提高性能,但應(yīng)用場景和實(shí)現(xiàn)方式有所不同。以下是一些關(guān)于防抖和節(jié)流的最佳實(shí)踐:
防抖的核心思想是在事件被連續(xù)觸發(fā)后,只執(zhí)行最后一次觸發(fā)的操作。適用于如輸入框?qū)崟r(shí)搜索、窗口大小調(diào)整等場景。
最佳實(shí)踐:
function debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
節(jié)流的核心思想是在一段固定的時(shí)間內(nèi),只執(zhí)行一次目標(biāo)函數(shù)。適用于如滾動(dòng)加載、鼠標(biāo)移動(dòng)等場景。
最佳實(shí)踐:
function throttle(func, wait) {
let lastTime = 0;
return function (...args) {
const context = this;
const nowTime = Date.now();
if (nowTime - lastTime > wait) {
func.apply(context, args);
lastTime = nowTime;
}
};
}
在某些場景下,可以將防抖和節(jié)流結(jié)合使用,以達(dá)到更好的性能優(yōu)化效果。例如,在滾動(dòng)加載時(shí),可以使用節(jié)流來控制觸發(fā)頻率,而在輸入框?qū)崟r(shí)搜索時(shí),可以使用防抖來確保只在用戶停止輸入一段時(shí)間后才執(zhí)行搜索操作。