为什么此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，但是如果需要，只需延迟开始。