防抖函数的实现原理是在事件被触发n秒后再执行回调函数,如果在这n秒内又触发了该事件,则重新计时。
以下是一个原生JavaScript实现防抖功能的例子:
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
使用方法:
function myFunction() {
console.log('防抖函数被触发');
}
const debouncedFunction = debounce(myFunction, 1000);
// 在事件处理程序中调用debouncedFunction
document.addEventListener('scroll', debouncedFunction);
在上述例子中,debounce
函数接受一个函数和延迟时间作为参数,并返回一个新的函数。在新的函数中,通过clearTimeout
清除之前设置的定时器,并在延迟时间后执行传入的函数。
注意,如果在延迟时间内再次触发了事件,将会重新计时。这样可以确保只有在事件停止触发后的一段时间内没有新的事件触发时,才会执行传入的函数。