防抖函数需暴露cancel方法以清除未执行的定时器，核心是通过闭包保存timeoutId并提供clearTimeout调用；每次触发先清前次定时器，执行后置空id，组件卸载时必须调用cancel防止内存泄漏。
在 JavaScript 防抖（debounce）中，取消正在等待中的任务，核心是**清除尚未执行的定时器**。只要保留对 setTimeout 返回的定时器 ID 的引用，并提供一个可调用的取消方法，就能随时中断待执行的回调。
防抖函数需暴露 cancel 方法
标准的防抖实现不能只返回一个函数，而要返回一个带有 cancel 方法的对象，或让防抖函数本身支持调用 .cancel()（通过闭包绑定定时器 ID）。
- 每次调用防抖函数时，先清除上一次的定时器（如果存在）
- 用闭包保存当前定时器 ID，供后续
cancel调用时清理 -
cancel方法只需调用clearTimeout(id)并将 id 置为null或undefined
带 cancel 功能的防抖实现示例
以下是一个简洁可靠的可取消防抖函数：
function debounce(func, wait) {
let timeoutId = null;
const debounced = function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
timeoutId = null; // 执行完清空，便于判断是否活跃
}, wait);
};
debounced.cancel = function() {
if (timeoutId !== null) {
clearTimeout(timeoutId);
timeoutId = null;
}
};
return debounced;
}
// 使用示例
const handleSearch = debounce((query) => {
console.log('发起搜索:', query);
}, 300);
// 输入过程中可随时取消待执行的搜索
handleSearch('a');
handleSearch('ab');
handleSearch.cancel(); // ✅ 立即取消，后续不会触发
常见使用场景与注意事项
-
输入框搜索：用户快速输入时频繁触发，离开页面或切换 tab 前应调用
cancel，避免内存泄漏或过期回调执行 -
组件卸载时（如 React useEffect cleanup）：必须调用
debounced.cancel()，否则可能造成 setState on unmounted component 报错 -
不要重复 cancel：多次调用
cancel是安全的，但要注意它只影响“最后一次未执行的定时器”，不影响已进入延迟队列的其他调用（因为每次调用都会覆盖前一个 timer） - 节流不适用 cancel：节流（throttle）通常基于时间窗口控制执行频率，不依赖单一定时器，一般不提供 cancel；若需取消，建议改用防抖，或手动维护执行状态标记
React 中结合 useEffect 的典型写法
在函数组件中，防抖函数应在 effect 外创建，并在清理函数中取消：
立即学习“Java免费学习笔记（深入）”；
useEffect(() => {
const debouncedFetch = debounce(fetchData, 500);
// 触发逻辑（如监听 input、resize 等）
window.addEventListener('resize', debouncedFetch);
return () => {
window.removeEventListener('resize', debouncedFetch);
debouncedFetch.cancel(); // ✅ 关键：防止异步回调在组件卸载后执行
};
}, []);
