闭包实现的防重复提交按钮核心是用函数作用域私有变量locked拦截重复调用，不操作DOM，纯逻辑封装；通过try-finally+setTimeout在冷却期后重置锁，支持多入口复用与策略组合。
闭包实现的防重复提交按钮，核心是用函数作用域“记住”一个状态变量（比如 locked），在不操作 DOM 的前提下拦截重复调用，把控制权交给业务逻辑本身——而不是靠禁用按钮、改文字或加 loading 层。
用闭包锁住执行入口
本质是创建一个带记忆能力的函数包装器，每次点击都先检查内部锁，未释放就直接返回，不往下走请求逻辑：
- 定义一个外层函数接收原始提交函数和等待时长，返回一个新函数
- 新函数内使用
let locked = false作为闭包私有状态 - 点击触发时：若
locked为 true，直接return；否则设为 true，执行原函数，并在finally中重置
不碰 DOM 的纯逻辑封装示例
下面这段代码完全不访问按钮元素，也不修改 disabled 或 textContent：
const createSubmitGuard = (fn, cooldown = 1000) => {
let locked = false;
return async function(...args) {
if (locked) return;
locked = true;
try {
return await fn(...args);
} finally {
setTimeout(() => { locked = false; }, cooldown);
}
};
};
// 使用方式
const guardedSubmit = createSubmitGuard(async (data) => {
await fetch('/api/submit', { method: 'POST', body: JSON.stringify(data) });
}, 1500);
// 绑定到按钮点击事件
document.getElementById('submitBtn').addEventListener('click', () => {
guardedSubmit({ name: '张三', email: 'zhang@example.com' });
});
为什么这比改 DOM 更灵活
DOM 操作有天然局限：按钮可能被隐藏、复用、动态生成，甚至不在当前页面；而闭包锁只约束函数调用流：
- 同一份逻辑可复用于按钮、快捷键、API 触发、定时任务等多种入口
- 不依赖特定 HTML 结构，适合微前端、组件库、无 UI 的 SDK 场景
- 可组合：比如叠加防抖、重试、错误分类等策略，全部在函数链中完成
注意解锁时机的可靠性
单纯用 setTimeout 解锁存在竞态风险（如请求极快完成，但锁还挂着）；更稳妥的做法是把解锁绑定到 Promise 生命周期：
- 用
Promise.finally确保无论成功失败都释放锁 - 若需支持取消（如 AbortController），可在 finally 中判断是否已手动取消，再决定是否解锁
- 避免用
setInterval或递归setTimeout，防止锁堆积
