当需要对频繁触发的事件进行节流(throttle)或防抖(debounce)处理时,可以使用原生 JavaScript 实现对应的函数。以下是简单实现节流函数和防抖函数的核心代码:
节流函数(throttle)
function throttle(func, delay) {
let timer = null;
let lastTime = 0;
return function(...args) {
const currentTime = Date.now();
if (currentTime - lastTime > delay) {
func.apply(this, args);
lastTime = currentTime;
} else {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
lastTime = currentTime;
}, delay);
}
};
}
防抖函数(debounce):
function debounce(func, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
在上述代码中,func 是要进行节流或防抖的回调函数,delay 是设置的时间间隔。
对于节流函数,它会保证 func 回调函数在指定的时间间隔内最多执行一次。如果在间隔内再次触发,将会重新计时延迟执行。
对于防抖函数,它会在指定的时间间隔后才执行 func 回调函数。如果在间隔内再次触发,会重新计时延迟执行。
这些函数的返回值是一个新的函数,被调用时会触发相应的节流或防抖逻辑,并执行传入的回调函数。
请注意,实际应用中,往往需要将节流函数或防抖函数应用到具体的事件处理函数上面,以实现对相应事件的节流或防抖处理