如何解决jQuery中快速点击按钮导致表单重复提交的问题？

这个快速点击导致的重复提交问题确实挺棘手的，你的现有方案已经尝试了禁用按钮和解绑事件，但还是存在漏洞——因为浏览器的事件队列可能在禁用按钮的代码生效前，就已经把多次点击事件排队了。下面给你几个更可靠的解决方案：

方案一：添加提交锁变量（最直接的修复） #

在函数执行的最开始就用一个锁变量拦截重复调用，即使事件已经进入队列，也会被这个锁拦住：

// 定义一个锁变量，放在全局或者闭包范围内，避免被污染
let isSubmitting = false;

function submit(){
  // 检查是否正在提交，是则直接返回
  if(isSubmitting) return;
  // 上锁，表示正在提交过程中
  isSubmitting = true;

  $("#save").prop('disabled', true);
  $("#loader").modal('show');

  if($("#name").val() == ''){
    alert("Please Enter Name!");
    $("#save").prop('disabled', false);
    $("#loader").modal('hide');
    // 验证失败，解锁允许再次提交
    isSubmitting = false;
    return;
  }
  // 其他验证逻辑...

  $("#form").submit();
}

$("#save").on('click', submit);

方案二：绑定表单submit事件（更规范的做法） #

把按钮改成submit类型，直接绑定表单的submit事件，这样不管是点击按钮还是回车提交都能统一处理，同时用锁变量阻止重复提交：

修改表单代码： #

<form action="abc.php" method="post" id="form">
  <input type="text" id="name" />
  <!-- 把按钮类型改成submit -->
  <button type="submit" id="save">save</button>
</form>

对应的JS代码： #

let isSubmitting = false;

$("#form").on('submit', function(e){
  // 如果正在提交，阻止本次表单提交
  if(isSubmitting){
    e.preventDefault();
    return;
  }
  isSubmitting = true;

  // 验证逻辑
  if($("#name").val() == ''){
    alert("Please Enter Name!");
    isSubmitting = false;
    e.preventDefault(); // 阻止表单提交
    return;
  }
  // 其他验证...

  $("#save").prop('disabled', true);
  $("#loader").modal('show');
  // 验证通过后，表单会自动提交，不需要手动调用submit()
});

为什么原来的方案会失效？ #

你原来的代码里，先执行$("#save").prop('disabled', true)再解绑事件，但用户快速点击时，第一次click事件还在执行过程中，第二次click事件可能已经被浏览器放入事件队列了——这时候禁用按钮的DOM操作还没完成，所以第二次点击依然会触发submit函数，导致重复提交。而锁变量在函数执行的第一时间就生效，能直接拦截后续的调用。

内容的提问来源于stack exchange，提问作者Jeevan