flush方法用于防抖函数中立即执行最后一次缓存的调用：保存最新this和参数、清除定时器、调用原函数并重置状态，适用于组件卸载、表单提交等紧急场景。
防抖（debounce）中实现 flush 方法，核心是提前触发当前待执行的回调，并清空定时器，确保“最新一次”的逻辑被立即执行——而不是丢弃或执行旧值。
flush 的作用与触发时机
flush 不是取消防抖，而是“拍板执行当前缓存的最后一次调用”。典型紧急场景包括：组件卸载前、表单提交瞬间、用户主动点击“立即搜索”按钮等。此时不能等延迟结束，但也不能执行过期的回调参数。
- 必须保留最后一次调用的参数和上下文（this）
- 必须清除已存在的定时器，防止后续自动触发
- 执行后应重置内部状态（如清空 timerId），避免重复 flush 或残留副作用
flush 的基础实现结构
以闭包方式维护 timerId 和 latestArgs/latestThis，flush 内部直接调用原函数并重置：
function debounce(fn, delay) {
let timerId = null;
let latestArgs = [];
let latestThis = null;
function debounced(...args) {
latestArgs = args;
latestThis = this;
clearTimeout(timerId);
timerId = setTimeout(() => {
fn.apply(latestThis, latestArgs);
timerId = null; // 执行后清空
}, delay);
}
debounced.flush = function() {
if (timerId !== null) {
fn.apply(latestThis, latestArgs);
clearTimeout(timerId);
timerId = null;
latestArgs = [];
latestThis = null;
}
};
return debounced;
}
注意 this 绑定与参数更新的时序
防抖函数常用于事件处理器（如 input、scroll），this 和参数随每次调用变化。flush 必须捕获并使用最后一次调用时的 this 和 args，否则会执行错误上下文或旧数据。
- 每次调用 debounced 时，都要更新 latestThis 和 latestArgs，不能只存第一次
- 若 fn 是箭头函数或已绑定 this（如 fn.bind(obj)），latestThis 可简化为固定值，但仍需更新参数
- 若支持立即执行模式（leading edge），flush 行为需与之解耦，不干扰原有逻辑
实际使用示例
比如在 React 中防抖搜索，用户点击“搜一下”按钮时调用 flush：
const handleSearch = debounce((query) => {
fetch(`/api/search?q=${query}`);
}, 300);
// 用户点击“立即搜索”
button.addEventListener('click', () => {
handleSearch.flush(); // 强制触发最后一次输入的 query
});
不复杂但容易忽略细节。关键是把“最后一次”真正存住，并在 flush 时干净利落地交出去。
