MacOS Safari 14.1.2 表单内按钮点击后HTML更新偶发失效问题求助

问题根因 #

这个偶发失效是Safari内核的渲染调度和表单提交优先级差异导致的：Chrome会确保当前批次的DOM更新渲染完成后再执行表单提交逻辑，而Safari会优先处理表单提交动作，若提交触发的页面重载/跳转逻辑先于DOM渲染队列执行，就会把还没完成的按钮内容更新丢弃，因此出现偶发不生效的情况。

可落地的修复方案 #

• 方案1：给表单提交加短延迟，预留Safari的DOM渲染时间
  调整JS代码如下，仅需加100ms以内的延迟即可覆盖绝大多数场景，不会影响用户体验：

$(document).on('click', "#btnFetch" ,function(){
    $('#btnFetch').html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').addClass('disabled');
    // 加50ms延迟再提交表单，给Safari留足渲染时间
    setTimeout(() => {
        $("#battery-form").submit();
    }, 50);
});

• 方案2：使用requestAnimationFrame确保渲染完成后提交，比定时器更精准
  如果你不想用定时器，可以用浏览器原生的requestAnimationFrame API，等待两次帧回调确保渲染完成后再执行提交：

$(document).on('click', "#btnFetch" ,function(){
    const $btn = $('#btnFetch');
    $btn.html('<span class="spinner-border spinner-border-sm mr-2" role="status" aria-hidden="true"></span>Loading...').addClass('disabled');
    // 两次requestAnimationFrame确保DOM更新已渲染到页面
    requestAnimationFrame(() => {
        requestAnimationFrame(() => {
            $("#battery-form").submit();
        });
    });
});

• 额外优化建议：给按钮同时添加原生disabled属性，避免用户重复点击，同时兼容Safari的状态识别，修改按钮更新逻辑如下：

$btn.html('加载中内容').addClass('disabled').prop('disabled', true);

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