防抖函数需暴露cancel方法以手动取消执行，核心是用闭包保存timerID并提供clearTimeout清除机制。基础实现中debounced.cancel()清空定时器，进阶支持leading模式时需配合isPending状态管理，适用于组件卸载、页面切换等场景。
在防抖函数中添加手动取消执行的能力，关键是在返回的函数中暴露一个 cancel 方法，该方法能清除待执行的定时器，并重置内部状态。这样调用方可在需要时主动中断延迟逻辑。
核心思路：保存定时器 ID 并提供 cancel 接口
防抖本质是用 setTimeout 延迟执行，只要在每次新触发时清除旧定时器、设置新定时器即可。要支持手动取消，只需把当前的 timerId 保存在闭包中，并对外暴露一个清除它的函数：
- 使用闭包变量（如
let timer = null）持有定时器引用 - 返回的防抖函数本身挂载一个
cancel方法，内部调用clearTimeout(timer)并将timer置为null - 执行函数前检查是否已被取消（可选，增强健壮性）
基础实现示例
以下是一个带 cancel 方法的防抖函数：
function debounce(fn, delay) {
let timer = null;
const debounced = function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
timer = null; // 执行后清空，便于判断是否已执行
}, delay);
};
debounced.cancel = function() {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
};
return debounced;
}
使用方式：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const handleSearch = debounce(() => console.log('搜索请求已发出'), 300);
handleSearch(); // 触发，300ms 后执行
handleSearch.cancel(); // 立即取消，不会执行
进阶：支持立即执行（leading）与取消后重置
若防抖支持首次立即执行（immediate: true），取消操作还需处理「已立即执行但尚未清除」的情况。此时可引入标志位或更精细的状态管理：
- 用
let isPending = false标记是否处于等待执行状态 -
cancel不仅清定时器，还置isPending = false - 执行回调前加
if (!isPending) return防止重复执行（适用于复杂场景）
不过对大多数业务（如输入框搜索、窗口 resize），基础版的 cancel 已完全够用。
实际应用小提示
常见需要手动取消的场景包括：
- 组件卸载前取消未完成的防抖请求（避免
setState在已销毁组件上调用） - 用户切换页面或关闭弹窗时，终止正在进行的自动保存或校验
- 测试中模拟“中途取消”行为，验证逻辑健壮性
建议在封装 hook（如 useDebounce）或工具类时默认集成 cancel 方法，提升可控性。
