在 JavaScript 中,事件節(jié)流(throttle)和防抖(debounce)是兩種常用的優(yōu)化高頻率觸發(fā)事件的技術(shù)。它們都可以用來控制函數(shù)的執(zhí)行頻率,從而提高性能。
1. 事件節(jié)流 (Throttle)
事件節(jié)流函數(shù)會在一定時間內(nèi)只執(zhí)行一次目標(biāo)函數(shù)。如果在等待期間再次觸發(fā)事件,那么重新計時。以下是一個簡單的節(jié)流函數(shù)實現(xiàn):
function throttle(func, delay) {
let lastCall = 0;
return function (...args) {
const now = Date.now();
if (now - lastCall < delay) {
return;
}
lastCall = now;
return func(...args);
};
}
使用示例:
const throttledFunction = throttle(() => {
console.log('Throttled function triggered');
}, 300);
window.addEventListener('scroll', throttledFunction);
2. 事件防抖 (Debounce)
事件防抖函數(shù)會在一定時間內(nèi)只執(zhí)行一次目標(biāo)函數(shù),如果在等待期間再次觸發(fā)事件,那么重新計時。防抖的主要應(yīng)用場景是在用戶停止操作后執(zhí)行一次。以下是一個簡單的防抖函數(shù)實現(xiàn):
function debounce(func, delay) {
let timeout;
return function (...args) {
const later = () => {
timeout = null;
func(...args);
};
clearTimeout(timeout);
timeout = setTimeout(later, delay);
};
}
使用示例:
const debouncedFunction = debounce(() => {
console.log('Debounced function triggered');
}, 300);
window.addEventListener('scroll', debouncedFunction);
總結(jié):