为什么这个 jQuery 同步 ajax 调用在执行之前会阻塞 UI？

Question

我对这个同步 jquery ajax 请求感到困惑。 ajax 加载程序直到 ajax 调用完成后才会显示。我很清楚同步请求会阻塞 UI，但是为什么它在该行代码被命中之前就开始阻塞呢？我一定是误解了执行顺序的基本原理。

            $("#ajax-loader").show(1, function(){
                $.ajax({
                    url: xxx,
                    type: "POST",
                    async: false,
                    success: function (data) {
                        hideAjaxLoader();
                    }
                });
            });

Answer 1

尽管 jQuery 在调用包含同步 ajax 调用的代码时认为动画是完整的，但这并不意味着浏览器在回调之前已经完成了渲染结果的所有工作。而且由于大多数浏览器在同步 ajax 调用期间完全阻止了他们的 UI，所以直到稍后才会处理它。

显然，只要有可能，就不要使用同步 ajax，因为它有这种阻塞 UI 的行为。

但是，如果您绝对无法避免使其同步（我从未遇到过这种情况的有效示例；我听说它们存在），请在 jQuery 认为动画是在启动 ajax 之前完成的。特别是 Firefox 似乎需要相当多的时间：

$("#ajax-loader").show(1, function(){
    setTimeout(function() {
        $.ajax({
            url: xxx,
            type: "POST",
            async: false,
            success: function (data) {
                hideAjaxLoader();
            }
        });
    }, 50); // 50 ms
});

再次，我强烈建议不要使用同步 ajax，但如果需要，只需延迟开始。