js防抖函数防抖无效的解决方法

2025/11/28 12:24:10 来源：https://blog.csdn.net/weixin_55510188/article/details/146320914 浏览: 次关键词：js防抖函数防抖无效的解决方法

在JavaScript中实现防抖函数：

// 正确传参的防抖实现
function debounce(func, delay) {let timer;return function(...args) {  // 使用剩余参数接收所有传参const context = this;     // 保留函数执行上下文clearTimeout(timer);timer = setTimeout(() => {func.apply(context, args);  // 正确绑定this和传递参数}, delay);};
}// 使用示例
const handleSearch = debounce(function(keyword) {console.log('Searching:', keyword);
}, 500);// 事件绑定（注意要直接使用返回的函数）
inputEl.addEventListener('input', (e) => {handleSearch(e.target.value);  // 直接调用已创建的防抖函数实例
});

但用户可能这样调用防抖函数：

// 错误示例
function handleInput(value) {console.log(value);
}function debouncedHandle(value) {debounce(handleInput(value), 500);
}input.addEventListener('input', (e) => debouncedHandle(e.target.value));

这会导致每次事件触发时都生成一个新的函数，而不是使用同一个防抖函数实例。这种情况下，定时器无法正确跟踪，防抖失效。

正确的做法应该是确保每次调用的是同一个防抖函数实例：

// 正确示例
function handleInput(value) {console.log(value);
}const debouncedHandle = debounce(handleInput, 500);input.addEventListener('input', (e) => debouncedHandle(e.target.value));

这样，每次事件触发时都调用同一个debouncedHandle实例，参数会被正确传递，并且防抖逻辑有效。