为何alert()在$.each循环前执行？jQuery表单验证问题求解

我用jQuery Validation插件处理一个有88个字段的表单（由可填写PDF转成HTML5），整体正常，但遇到了不符合预期的异步行为：

点击提交按钮时的逻辑是：验证失败时，先调用OSH.placeMessages()显示错误信息，再弹出alert提示用户修正。代码如下：

success: function() {
    const OSHform=$("form").eq(0);
    if (OSHform.valid()) {
        top.document.location.href = "/Adsentry/completed";
    }
    else {
        OSH.placeMessages();
        alert("Fields did not validate. Please fix the highlighted fields and try again");
    }
}

OSH.placeMessages()的实现：

OSH.placeMessages = function() {
    $('div[id^="form"].error').each(function(index) {
        let me = $( this )
        let labelid = me.attr("id");
        let inputid = labelid.replace("-error", "");
        let input_elem = $("#" + inputid);
        let heightnum = 1 * input_elem.css("height").replace("px", "");
        let topnum = 1 * input_elem.css("top").replace("px","");
        if (input_elem.attr("name") === "JR DOB") {
            topnum -= heightnum;
        }
        let leftnum = 1 * input_elem.css("left").replace("px", "");
        let widthnum = 1 * input_elem.css("width").replace("px", "");
        me.css("position", "absolute");
        me.css("top", (topnum + heightnum - 6) + "px");
        me.css("left", (leftnum + 10) + "px");
        me.css("color", "red");
        me.css("z-index", 1000);
        me.css("display", "block");
    });
}

实际执行时，alert会先弹出，错误信息要等关闭alert后才显示。我原本以为$.each是同步执行的，不知道为什么alert会提前触发，想请教怎么让alert等错误信息显示完成后再弹出？

问题原因 #

虽然$.each是同步执行的，但浏览器的JavaScript执行线程和UI渲染线程是互斥的：JS代码运行时，UI渲染会被暂时阻塞。OSH.placeMessages()里的DOM样式修改（比如设置display:block）会被加入浏览器的渲染队列，但alert是同步阻塞弹窗，会立刻暂停JS执行，同时阻止渲染队列的处理——所以alert弹出时，错误信息的样式更新还没来得及渲染到页面上，必须等alert关闭后，浏览器才会处理渲染队列，显示错误信息。

解决方法 #

用setTimeout把alert放到下一个事件循环执行，给浏览器留出处理UI渲染的时间：

else {
    OSH.placeMessages();
    // 延迟0毫秒放入事件队列，让浏览器先完成UI渲染
    setTimeout(function() {
        alert("Fields did not validate. Please fix the highlighted fields and try again");
    }, 0);
}

这里的setTimeout(..., 0)并不是真的等待0毫秒，而是告诉浏览器：当前JS执行栈清空后，立即执行这个回调。此时浏览器会先处理之前的UI渲染请求，再弹出alert，就能保证错误信息先显示出来。

额外优化建议 #

• 尽量避免使用alert：alert会阻塞整个页面的交互和渲染，改用页面内的自定义提示组件（比如顶部通知条、模态框），体验更流畅。
• 利用jQuery Validation内置机制：插件本身支持自定义错误提示的位置和样式（比如通过errorPlacement配置项），可以省去自定义OSH.placeMessages()的麻烦，减少代码复杂度。

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