同步Web API调用前纯JavaScript等待模态框不显示问题排查

这问题我太熟了！核心原因其实是同步Web API调用会完全阻塞浏览器的UI渲染线程，咱们一步步拆解清楚：

为什么同步调用时模态框看不到？ #

浏览器的JavaScript执行线程和UI渲染线程是互斥的——当JS代码在运行时，UI渲染会被暂停，直到JS线程空闲下来。看你的代码流程：

1. 调用showWaitingMessage(true)，创建了模态框DOM并添加到body
2. 紧接着执行同步的callWebApi，这时候整个JS线程被卡住，浏览器根本没时间去渲染刚添加的模态框
3. 等同步请求终于完成，你立刻调用showWaitingMessage(false)把模态框删掉
4. 结果就是：模态框刚要被渲染就被删掉了，用户完全看不到它出现的过程

而异步调用时，API请求在后台执行，JS线程不会被阻塞，浏览器有足够时间在请求发送前完成模态框的渲染，所以能正常显示。

代码里的小细节问题（顺带优化） #

除了核心的线程阻塞问题，你的代码还有两个小隐患：

• div变量没有用var声明，变成了全局变量，容易引发意外覆盖或内存泄漏，建议改成var div = $("<div></div>");
• 计算模态框top值时用了document.body.height()，如果页面内容高度小于视口高度，模态框会跑到页面中间而非窗口中间，建议换成window.top.$(window).height()

解决方案（按优先级排序） #

1. 优先把同步API改成异步（最推荐）

同步请求在现代浏览器里已经不被推荐了，不仅阻塞UI，还会影响用户体验。如果你的callWebApi支持异步（回调/Promise），把showWaitingMessage(false)放到成功/失败回调里：

function createReminder() {
    if (shouldCreateReminder()) {
        Elad.Global.showWaitingMessage(true, "אנא המתן...", "אנא המתן ליצירת פעילות המשך עוקבת");
        // 改成异步调用，将隐藏模态框的逻辑移到回调中
        Elad.Global.callWebApi(
            "POST", 
            url, 
            request, 
            function(result) {
                Elad.Global.showWaitingMessage(false);
                if (result && result.Success) {
                    // 原来的success逻辑
                }
            }, 
            function(error) {
                Elad.Global.showWaitingMessage(false);
                createReminderErrorCallback(error);
            }
        );
    }
}

2. 实在无法改异步？给浏览器留渲染时间

如果必须用同步请求，可以用setTimeout把同步请求延迟到下一个事件循环，让浏览器先完成模态框的渲染：

function createReminder() {
    if (shouldCreateReminder()) {
        Elad.Global.showWaitingMessage(true, "אנא המתן...", "אנא המתן ליצירת פעילות המשך עוקבת");
        // 用setTimeout把同步请求放到下一个事件循环，给浏览器留渲染时间
        setTimeout(function() {
            var result = Elad.Global.callWebApi("POST", url, request, null, createReminderErrorCallback);
            Elad.Global.showWaitingMessage(false);
            if (result && result.Success) {
                // 原来的success逻辑
            }
        }, 0); // 0毫秒足够触发一次UI渲染
    }
}

这里的setTimeout(fn, 0)不是真的立刻执行，而是把回调放到事件队列末尾，让当前的UI渲染任务（模态框绘制）先完成，再执行同步请求。

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