防抖函数在表单自动保存中核心作用是避免频繁请求，确保仅在用户停顿后提交最后一次输入。其实现通过闭包维护定时器，清除前次延时并重设；绑定input事件时需统一收集多字段数据，延迟建议600–1000ms；手动保存应调用flush立即执行。
防抖函数在表单自动保存中，核心作用是避免用户每敲一个字就发请求，而是等用户停顿一段时间后再提交最新数据。
为什么表单自动保存要用防抖
用户输入时频繁触发保存（比如监听 input 事件），若不做节流或防抖，可能一秒内发 5–10 次请求，既浪费资源，又容易因后发先至导致数据覆盖。防抖能确保只保留最后一次输入的“稳定状态”，等用户暂停输入（例如 800ms）再执行保存。
基础防抖函数实现
一个轻量、可复用的防抖函数：
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
注意：每次调用返回的新函数都共享同一个 timer 变量（闭包），所以它能正确清除前一次定时器。
立即学习“Java免费学习笔记（深入）”；
绑定到表单输入事件
以一个文本域为例，配合实际保存逻辑：
const saveDraft = async (content) => {
try {
await fetch('/api/draft', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content })
});
} catch (e) {
console.warn('保存失败，稍后重试');
}
};
const debouncedSave = debounce((value) => {
saveDraft(value);
}, 800);
document.getElementById('editor').addEventListener('input', (e) => {
debouncedSave(e.target.value);
});
- 不要在每次
input中直接调用saveDraft，必须通过防抖包装后的函数 - 延迟时间建议设为 600–1000ms：太短起不到防抖效果，太长影响用户体验
- 如果表单有多个字段（如标题 + 正文），可统一收集数据后传入，而不是为每个字段单独防抖
补充：手动触发保存与防抖共存
用户点击「保存」按钮时，应立即保存，不等待防抖延迟。此时可调用防抖函数的“立即执行”方法（即取消定时器并立刻运行）：
const debouncedSave = debounce((value) => {
saveDraft(value);
}, 800);
// 手动保存按钮
document.getElementById('save-btn').addEventListener('click', () => {
debouncedSave.flush?.(); // 如果你扩展了 flush 方法
});
或者更稳妥的做法：给防抖函数加个 flush 方法（常见于 Lodash 的 debounce）；若自己实现，可返回带 flush 的对象，或额外暴露一个清除并执行的接口。
