防抖函数需在页面卸载前强制执行未触发任务，核心是监听beforeunload/visibilitychange事件并调用flush方法清空定时器、同步执行最后一次回调，确保数据不丢失。
在页面卸载前强制执行防抖函数中尚未触发的延迟任务，核心思路是：监听 beforeunload 或 visibilitychange 事件，在页面即将不可见或关闭时，立即调用防抖函数的“立刻执行”逻辑（即清空定时器并同步执行最后一次缓存的回调）。
确保防抖函数支持手动触发
标准的防抖实现通常封装了闭包内的定时器引用和参数缓存。要支持强制执行，需暴露一个“取消并立即执行”的方法（如 flush）或返回一个含该能力的对象：
function debounce(func, wait) {
let timeout = null;
let args, thisArg;
const debounced = function (..._args) {
args = _args;
thisArg = this;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(thisArg, args);
args = null;
thisArg = null;
}, wait);
};
// 新增 flush 方法：清空定时器并立即执行最后一次调用
debounced.flush = function () {
if (timeout) {
clearTimeout(timeout);
timeout = null;
if (args != null) {
func.apply(thisArg, args);
args = null;
thisArg = null;
}
}
};
return debounced;
}
在页面离开前调用 flush
监听浏览器生命周期事件，在合适时机触发强制执行。推荐组合使用以下两种方式，覆盖更多场景：
-
beforeunload：适用于用户主动关闭/刷新标签页、跳转到外部链接等场景；注意此事件中不能执行异步操作（如fetch），但同步执行防抖回调是安全的。 -
visibilitychange（配合document.hidden）：适用于用户切换标签页、最小化窗口等场景；当页面变为隐藏状态时调用flush，可避免数据丢失（如未提交的搜索关键词、编辑草稿）。
const saveDraft = debounce(() => {
localStorage.setItem('draft', editor.value);
}, 1500);
// 页面卸载前强制保存
window.addEventListener('beforeunload', () => {
saveDraft.flush();
});
// 页面隐藏前也尝试保存（更及时）
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
saveDraft.flush();
}
});
注意事项与边界情况
实际使用中需注意几个关键点：
立即学习“Java免费学习笔记（深入）”；
-
避免重复 flush：同一个防抖实例不要在多个事件里反复调用
flush，否则可能引发重复执行；建议只在beforeunload+visibilitychange中各调一次，且flush内部已做防重处理（如清空timeout后置空args）。 -
不依赖异步操作：
beforeunload中无法等待 Promise，因此防抖回调内若含await fetch()等异步逻辑，应提前降级为同步 localStorage 存储，或改用pagehide（部分浏览器支持，且允许短时间异步）。 -
移动端兼容性：iOS Safari 对
beforeunload支持有限，visibilitychange更可靠；可补充监听pagehide作为兜底：
window.addEventListener('pagehide', (e) => {
if (!e.persisted) { // 非 bfcache 情况下才 flush
saveDraft.flush();
}
});
节流场景是否需要类似处理？
节流（throttle）一般用于高频触发但只需定期响应的操作（如滚动监听），其设计本身不累积调用，最后一次未执行的调用通常不关键。除非业务明确要求“最后一下必须执行”（例如记录最终滚动位置），否则无需强制 flush。如确有需要，可仿照防抖为节流函数添加 flush 方法，清除 pending 状态并立即触发一次。
