桌面端Safari表单提交与onclick()行为异常问题排查

我有一个触发POST请求的表单，原本希望通过onclick()在请求处理时显示加载Spinner，但该Spinner在桌面端Safari中有时会随机不显示，Chrome和Firefox中运行完全正常。我猜测可能是表单在JS完成DOM更新前就已提交，但这只是推测。尝试过改用onfocus()、onsubmit()等事件，也用过事件处理器替代内联onclick()，问题依旧随机出现。想知道Safari中出现这个问题的原因，以及如何实现可靠运行。

现有代码 #

表单代码 #

<form action="/myform" method="post">
  <input
    type="submit"
    id="stage1button"
    name="myformname"
    value="Click me"
    onclick="javascript:stage2loading();"
  />
</form>

JavaScript函数 #

function stage2loading() {
  document.getElementById("stage2circle").style.display = "none";
  document.getElementById("stage2loader").style.display = "block";
}

问题原因 #

Safari的事件处理机制和Chrome/Firefox存在差异：当点击submit按钮时，浏览器会优先触发表单提交的默认行为，而DOM更新操作（显示Spinner）属于宏任务，在Safari中可能被表单提交的页面跳转行为抢占，导致DOM更新还没完成，页面就已经开始跳转，Spinner自然无法显示。

另外，内联事件处理函数（如onclick）在Safari中的执行优先级可能低于表单提交的默认行为，即使改用onsubmit，如果没有显式阻止默认行为并等待DOM更新完成，依然可能出现这个问题。

可靠实现方案 #

核心思路 #

先阻止表单默认提交行为，确保Spinner的DOM更新完成后，再手动触发表单提交，给Safari足够的渲染时间。

修改后的代码示例 #

表单代码（移除内联事件）

<form action="/myform" method="post" id="myForm">
  <input
    type="submit"
    id="stage1button"
    name="myformname"
    value="Click me"
  />
</form>

JavaScript代码

document.getElementById('myForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 更新Spinner状态
  document.getElementById("stage2circle").style.display = "none";
  document.getElementById("stage2loader").style.display = "block";
  
  // 禁用按钮防止重复点击
  document.getElementById('stage1button').disabled = true;
  
  // 利用requestAnimationFrame确保浏览器完成渲染后再提交表单
  requestAnimationFrame(() => {
    this.submit();
  });
});

额外说明 #

如果表单需要先执行异步验证等操作，可以结合async/await进一步确保流程顺序：

document.getElementById('myForm').addEventListener('submit', async function(e) {
  e.preventDefault();
  
  // 执行异步验证
  const isValid = await validateFormData();
  
  if (isValid) {
    // 更新Spinner
    document.getElementById("stage2circle").style.display = "none";
    document.getElementById("stage2loader").style.display = "block";
    document.getElementById('stage1button').disabled = true;
    
    requestAnimationFrame(() => {
      this.submit();
    });
  }
});

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