javascript - Div.Show 在运行时不起作用，但在单步执行代码时起作用

Question

我有一个在保存时应该出现的 div。其标记与此类似:

<div class="Working" style="display: none;">Message</div>

稍后在我的代码中我有一些保存逻辑，它执行以下操作:

function SaveData() {
    var cancelSave = false;

    $('.Working').text('Saving data ...').show();
    var saveData = { 'Data': myData }; // Actually a lot of logic in here

    if (cancelSave) {
        $('.Working').hide();
    } else {
        $.ajax({
            // bunch of stuff here
            async: false, // tried this both ways
            error: function (rsp) {
                $('.Working').hide();
            },
            success: function (rsp) {
                $('.Working').text('Saved');
                $('.Working').fadeOut(5000, DoNothing());
            }
        });
    }
}

function DoNothing() {
    // Does nothing
}

如果我单步执行代码，当我单步执行初始 .show() 行时，div 会完美显示。但是，当我“全速”运行时......我从未看到“正在保存数据......”消息。实际保存大约需要 5-7 秒，因此有足够的时间来查看该消息。

Answer 1

UI 被锁定，因为 ajax async 属性设置为 false。将其设置为 true 并尝试一下。 SaveData 方法将完成，更新 UI 以显示“正在保存数据...”文本，然后在 ajax 调用返回时再次更新。