防抖在页面离开前用于延迟执行保存、上报等异步操作，而非作用于unload/beforeunload本身；通过闭包维护timeoutid，在用户停顿后且页面存活时触发，切后台或卸载时取消，beforeunload中仅同步读取防抖维护的状态。
防抖在用户离开页面前做最后一次状态确认，本质是把“离开动作”当作高频触发的终点事件来处理——但要注意，页面卸载（unload / beforeunload）本身不可被防抖，因为浏览器不允许在该阶段延迟或取消导航。真正能用防抖的地方，是离开前需要主动保存、上报或校验的那些异步操作，比如表单草稿自动保存、用户行为埋点、未提交数据提醒等。
适用场景：离开前需延迟确认的异步动作
用户频繁切换输入、修改、再切走时，你不需要每次变化都发请求；只需在最后一次修改后空闲一段时间（比如 800ms），且用户还没关闭/跳转，才触发保存逻辑。如果用户紧接着就刷新或关页，这个防抖计时器会被清除，避免无效请求。
- 表单编辑器的“自动保存草稿”：用户打字、删改、聚焦失焦反复切换，只在停顿后且页面仍存活时上传
- 统计用户停留时长与最后操作节点：不记录每秒点击，而是在离开前 500ms 内最后一次交互后汇总上报
- 弹出“您有未保存内容”提示前做二次判断：先防抖检测是否真有未保存变更，再决定是否拦截 beforeunload
关键实现：绑定到可中断的操作，而非 unload 本身
不能对 window.beforeunload 回调本身做防抖（它必须同步返回字符串），但可以对它依赖的状态检查或副作用函数做防抖。
- 用闭包保存 timeoutId，每次用户修改表单、点击按钮、切换 tab 时调用 debouncedSave()
- 在 beforeunload 中不执行耗时逻辑，只同步读取当前是否“有未保存变更”——这个状态由防抖函数内部维护（例如标记 isDirty = true，并在防抖执行后置为 false）
- 防抖函数内发起 fetch 或 localStorage.setItem，失败时可降级为本地缓存，不阻塞页面卸载
简单可靠示例（含清理）
以下是一个带 cancel 能力的防抖保存函数，配合页面生命周期使用：
（注意：实际项目中建议用 AbortController 配合 fetch）const saveDraft = debounce(() => {
if (!document.hidden) { // 页面仍在前台才发请求
fetch('/api/draft', { method: 'POST', body: JSON.stringify(formData) })
.catch(() => localStorage.setItem('draft_backup', JSON.stringify(formData)));
}
}, 800);
// 监听用户活跃行为
window.addEventListener('input', () => saveDraft());
window.addEventListener('change', () => saveDraft());
document.addEventListener('visibilitychange', () => {
if (document.hidden) saveDraft.cancel(); // 切到后台立即取消待执行保存
});
// beforeunload 中仅做轻量判断
window.addEventListener('beforeunload', (e) => {
if (hasUnsavedChanges()) {
e.returnValue = '您有未保存的内容，确定要离开吗？';
}
});Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
