如何利用闭包实现的“防重复提交按钮”在不修改 DOM 状态的前提下控制逻辑-js教程-PHP中文网

闭包实现的防重复提交按钮核心是用函数作用域私有变量locked拦截重复调用，不操作dom，纯逻辑封装；通过try-finally+settimeout在冷却期后重置锁，支持多入口复用与策略组合。

如何利用闭包实现的“防重复提交按钮”在不修改 dom 状态的前提下控制逻辑

闭包实现的防重复提交按钮，核心是用函数作用域“记住”一个状态变量（比如 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' });
});