如何用JS延迟HTML提交按钮的提交，确保加载动画正常显示？

你的问题出在：浏览器更新UI（比如加载动画的样式）要等当前JS代码执行完才会进行，而你修改样式后立刻调用this.form.submit()，页面会马上跳转，导致动画还没来得及渲染就被跳过了。

给提交操作加个短延迟就能解决，让浏览器有时间完成动画渲染。修改后的 onclick 代码如下：

onclick="
this.classList.add('button--loading'); // 这里用add代替toggle，避免重复点击时误移除类
this.disabled = true;
// 延迟100毫秒提交表单，给浏览器足够时间渲染动画
setTimeout(() => {
  this.form.submit();
}, 100);"

补充说明： #

• 把toggle改成add更稳妥，因为按钮点击后就会被禁用，不会被重复点击，用add能确保加载类只会被添加一次。
• 延迟时间不用太长，100毫秒足够让浏览器完成UI更新，用户也不会感觉到明显延迟。

如果想让代码更易维护，推荐把逻辑移到单独的<script>标签里，而不是写在onclick属性中：

<button id="submitBtn" type="submit">提交</button>

<script>
document.getElementById('submitBtn').addEventListener('click', function(e) {
  // 阻止默认的表单提交行为，手动控制提交时机
  e.preventDefault();
  
  this.classList.add('button--loading');
  this.disabled = true;
  
  setTimeout(() => {
    this.form.submit();
  }, 100);
});
</script>

这种写法更清晰，也方便后续修改和调试。

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