表单提交先执行动画再提交的循环问题求解

这问题我之前也踩过坑——你碰到的核心问题是：当你在动画完成后调用$('form').submit()时，这个方法会再次触发你绑定的submit事件处理器，于是又会执行e.preventDefault()，陷入无限循环，自然没法提交表单。

而且你想保留回车触发提交的需求完全可行，不需要切换到onClick事件，给你两个简单的解决方案：

方案一：用状态标记控制阻止逻辑 #

加一个开关变量，区分是第一次触发（需要执行动画）还是后续的提交流程（直接放行）：

let isProcessingSubmit = false;
$('form').submit(function(e) {
  // 如果已经在提交流程中，直接跳过阻止逻辑
  if (isProcessingSubmit) return;
  
  e.preventDefault();
  isProcessingSubmit = true;
  
  $('.thing').fadeOut('slow', () => {
    // 此时标记为已处理，再次提交不会触发阻止
    $(this).submit();
  });
});

方案二：直接调用原生表单提交（更简洁） #

jQuery的submit()方法会触发绑定的事件，但原生DOM元素的submit()方法会直接提交表单，不会触发事件处理器，完美避开循环：

$('form').submit(function(e) {
  e.preventDefault();
  // 保存原生表单元素的引用
  const nativeForm = this;
  
  $('.thing').fadeOut('slow', () => {
    // 调用原生submit，不会触发jQuery绑定的事件
    nativeForm.submit();
  });
});

这两种方案都能同时支持点击提交按钮和回车键提交的场景，因为回车触发表单提交本来就会触发submit事件，你的逻辑完全覆盖了这两种情况。

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