防抖函数的cancel方法本质是清除定时器并重置状态；通过保存settimeout返回值，用cleartimeout取消延迟执行，支持直接调用和debounced.cancel()两种形式，并可扩展flush强制执行。
在 JavaScript 中，防抖函数的 cancel 方法本质是清除待执行的定时器，并重置内部状态。只要把 setTimeout 的返回值（即定时器 ID）保存下来，就能在需要时调用 clearTimeout 取消延迟执行。
返回一个带 cancel 方法的对象
最常用的方式是让防抖函数返回一个对象，其中包含执行函数和 cancel 方法：
function debounce(fn, delay) {
let timer = null;
return {
run(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
timer = null; // 执行完可清空，便于判断是否活跃
}, delay);
},
cancel() {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
}
};
}
// 使用示例
const debouncedSearch = debounce(console.log, 300);
debouncedSearch.run("hello");
debouncedSearch.run("world"); // 上次被取消
debouncedSearch.cancel(); // 立即取消当前等待中的调用
改造为可直接调用 + 静态 cancel 方法
如果希望保持“函数式调用”习惯（如 debounced()），同时又支持 debounced.cancel()，可以利用闭包绑定方法到函数实例上：
function debounce(fn, delay) {
let timer = null;
const debounced = function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn(...args);
timer = null;
}, delay);
};
debounced.cancel = function () {
if (timer !== null) {
clearTimeout(timer);
timer = null;
}
};
return debounced;
}
// 使用
const handleInput = debounce((val) => console.log("search:", val), 200);
handleInput("a");
handleInput("ab"); // 取消前一次
handleInput.cancel(); // 主动终止，后续不会触发
注意：cancel 后的状态与边界情况
cancel 只影响尚未执行的延迟调用，已进入定时器队列但未到时间的会被清除；已执行或正在执行的不受影响。需注意以下几点：
- 多次调用
cancel是安全的（加if (timer)判断即可） - 如果防抖函数设置了「立即执行」（leading edge），
cancel不会影响已经同步触发的那次调用 - 想在取消时执行清理逻辑（如重置 UI 加载状态），可在
cancel内部添加对应代码
进阶：支持 flush 强制立即执行
有些场景还需要“立刻触发最后一次待执行逻辑”，类似 Lodash 的 flush：
debounced.flush = function () {
if (timer !== null) {
clearTimeout(timer);
timer = null;
fn.apply(this, lastArgs || []); // 需额外保存 args，此处略
}
};
实际项目中可根据需要选择是否扩展该能力。
