防抖函数中实现cancel方法需在闭包中用let timerid = null保存定时器id，每次触发前cleartimeout旧定时器，暴露cancel()清空并重置timerid，react/vue中在生命周期钩子调用，确保组件卸载后不执行且避免重复清除报错。
在防抖函数中实现 cancel 方法，核心是保存定时器的引用，并提供一个可调用的清除接口。当用户关闭页面或切换路由时，主动调用该方法，避免定时器在组件已销毁后仍执行，引发内存泄漏或报错（如操作已卸载组件的 state）。
保存定时器 ID 并暴露 cancel 接口
防抖函数需返回一个对象，包含执行函数和 cancel 方法。关键是在闭包中维护 timerId，并在每次新触发时清除旧定时器；cancel 方法则负责清空当前待执行的定时器。
- 使用
let timerId = null在闭包中持久化存储定时器 ID - 每次调用防抖函数时先
clearTimeout(timerId)，再设置新定时器 - 将
cancel: () => clearTimeout(timerId)暴露出去，供外部手动调用
在组件卸载或路由离开时调用 cancel
React 中可在 useEffect 的清理函数中调用 cancel；Vue 中可在 onUnmounted 或 beforeRouteLeave 钩子中调用；纯 JS 场景下可监听 beforeunload 或 pagehide 事件。
- React 示例：
useEffect(() => () => debouncedFn.cancel(), [debouncedFn]) - Vue 3 示例：
onUnmounted(() => debouncedFn.cancel()) - 监听页面卸载：
window.addEventListener('beforeunload', () => debouncedFn.cancel())（注意：仅作兜底，优先用框架生命周期）
确保 cancel 后不再误触发
cancel 执行后应重置 timerId，防止重复 clearTimeout 报错，也便于后续重新使用（如果需要复用同一防抖实例）。
- cancel 方法内部执行
clearTimeout(timerId)后，立即将timerId = null - 可选：在防抖函数主体中增加判断
if (timerId === null) return，避免 cancel 后又意外触发 - 不建议在 cancel 后自动重建定时器，应由业务逻辑控制是否重新绑定
完整防抖函数示例（带 cancel）
以下是一个轻量、可直接使用的防抖实现：
function debounce(fn, delay) {
let timerId = null;
return {
run(...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
fn(...args);
timerId = null;
}, delay);
},
cancel() {
clearTimeout(timerId);
timerId = null;
}
};
}
// 使用
const saveDraft = debounce(() => api.save(), 800);
saveDraft.run(); // 触发防抖执行
saveDraft.cancel(); // 手动清除
