在 JavaScript 中,防抖(debounce)和節(jié)流(throttle)是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以提升性能,但實現(xiàn)方式和應(yīng)用場景略有不同。
防抖(debounce):
防抖的核心思想是在一定時間內(nèi),事件被連續(xù)觸發(fā)時,只執(zhí)行最后一次觸發(fā)的事件處理函數(shù)。適用于輸入框?qū)崟r搜索、表單驗證等場景。
實現(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é)流的核心思想是在一定時間內(nèi),事件被連續(xù)觸發(fā)時,只執(zhí)行一次事件處理函數(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;
}
};
}
如何提升性能:
總之,防抖和節(jié)流是兩種有效提升 JavaScript 性能的技術(shù),它們可以減少事件處理函數(shù)的執(zhí)行次數(shù),避免不必要的計算,提高代碼的執(zhí)行效率。在實際開發(fā)中,根據(jù)具體場景選擇合適的技術(shù)進行優(yōu)化。