javascript - 为什么 async : false inside a listener, 停止所有执行？

Question

我已经盯着这个问题几个小时了。我有一个样板代码示例，如下所示

$('.save_stuff').on("click", function(e) 
{
    e.preventDefault();
    e.stopPropagation();

    preprocessAddProvisioning();

    var mac = $('#c_mac_address').val();
    var make = $('#c_make').html();
    var model = $('#c_model option:selected').text();
    var regex = /[a-zA-Z0-9]{12}/g;

    if (mac.match(regex) && validateNewDevice())
    {
        $.ajax({
            url: "/SomeUrl",
            dataType: 'json',
            type: 'POST',
            async: false,
            data: 
            {
                mac: mac,
                model: model,
                make: make
            },
            success: function(data)
            {
                if (data.success)
                {
                    $('#someValue').hide();
                    $('#modalNewDevice').modal('hide');

                    if (someValue !== undefined && !someValue.snom_mac_success)
                    {
                        window.location.href = "/SomeUrl?id="+someValue.newId+"&someValue=false";
                    }
                    else
                    {
                        window.location.href = "/SomeUrl?id="+data.newId;
                    }
                }
                else
                {
                    $('#c_msg').html(data.msg);
                    $('#c_msg').closest('.form-group').addClass('has-error');
                }
            },
            error: function()
            {

            }
        });
    }
});

使用名为being的方法；

function preprocessAddProvisioning()
{
    $('#mac_load').show('fast');
}

有人可以告诉我为什么 async: false 停止调用 preprocessAddProvisioning() 吗？当考虑 ajax 请求的上下文而不是监听器的上下文时，我意识到它的含义。

非常感谢

Answer 1

AJAX 请求不会阻止 preprocessAddProvisioning() 的执行。它会阻塞 UI 线程并阻止窗口更新，因此看起来 preprocessAddProvisioning() 没有执行任何操作。最重要的是，.show('fast') 使用动画，这不仅需要一次 UI 更新，而且需要在几毫秒的时间内进行多次 UI 更新。当 JavaScript 执行停止时，jQuery 甚至无法尝试执行该动画，更不用说让窗口显示它了。

由于 UI 线程阻塞而导致窗口无法更新的演示:

document.getElementsByTagName('input')[0].addEventListener('click', function (){
    var div = document.getElementsByTagName('div')[0];
    // hide div
    div.style.display = 'none';
    
    // block thread for 3 seconds
    var dt = new Date();
    while (new Date() - dt < 3000) {}
});

div { width: 100px; height: 100px; background-color: red; }

<div>

</div>
<input type="button" value="Click me" />

这个故事的寓意:不要使用async: false，但如果你绝对必须这样做，你可以使用超时来确保你的加载器在之前 您发出 AJAX 请求:

setTimeout(function () {
    makeTheAjaxRequest();
}, 500);

请记住，如果您的加载程序涉及动画 .gif 或类似内容，则 .gif 将在 UI 线程被阻止时卡住。

更精确的选择是在动画完成后使用 .show() 上的 complete 回调继续执行您的步骤，但所有这些都可能完成就是将你的代码搞得像意大利面条一样。真正的答案是不要使用async: false。