1、防抖(Debounce)
防抖的主要目的是避免某个事件被过于频繁地触发,导致不必要的资源消耗。具体来说:
当事件被触发时,防抖函数会延迟执行其回调函数。如果在设定的延迟时间内事件再次被触发,则会重新计时。
只有在最后一次触发事件后的延迟时间内不再有新的触发时,回调函数才会被执行一次。
function debounce(fn, delay) {
let timer = null;
return function() {
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
2、节流(Throttle)
节流则是另一种控制事件触发频率的技术,它确保某个函数不会被过于频繁地执行。
当事件触发时,节流函数会确保无论后续事件如何频繁触发,至少在一个固定的时间间隔内,函数只能被执行一次。
function throttle(func, wait) {
var timeout;
return function() {
if (timeout) return;
timeout = setTimeout(() => {
func.apply(this, arguments);
timeout = null;
}, wait);
};
}