javascript - jQuery.when() 似乎没有在等待

Question

当用户在 DOM 中执行某些操作(单击复选框、选择下拉列表等)时，我需要进行服务器端调用。这是一系列事件:

1. 用户点击一个复选框(或其他东西)
2. 微调器淡入，用户界面变得不可用
3. 进行服务器端调用，并返回一些 JSON
4. 使用 JSON 中的值更新 UI 中的标签
5. 微调器淡出，用户界面再次可用

我遇到的问题是 4 和 5 经常颠倒，有时旋转器会在标签更新前 2 或 3 秒淡出。

我正在尝试使用 .when() 来确保这不会发生，但我似乎没有做对。我一直在看this thread ，还有这个，还有jquery's own documentation .

这是我现在所在的位置...

function UpdateCampaign() {
    $('#overlay').fadeIn();
    $.when(SaveCampaign()).done(function () {
        $('#overlay').fadeOut();
    });
}

function SaveCampaign() {
    var formData =
        .... // get some data
    $.ajax({
        url: '/xxxx/xxxx/SaveCampaign',
        type: 'GET',
        dataType: 'json', 
        data: { FormData: formData },
        success: function (data) {
            var obj = $.parseJSON(data);
            .... // update a label, set some hidden inputs, etc.
        },
        error: function (e) {
            console.log(e)
        }
    });
}

一切正常。执行服务器端方法，返回并解析正确的 JSON，并按预期更新标签。

我只需要那个该死的微调器等待并淡出，直到标签更新。

Answer 1

这个问题是因为你没有给 $.when() 一个 promise 。事实上，你给它 null 所以它会立即执行。您可以通过从您的 SaveCampaign() 函数返回 $.ajax 提供的 promise 来解决此问题，如下所示:

function SaveCampaign() {
    var formData = // get some data

    return $.ajax({ // < note the 'return' here
        url: '/xxxx/xxxx/SaveCampaign',
        type: 'GET',
        dataType: 'json', 
        data: { FormData: formData },
        success: function (data) {
            var obj = $.parseJSON(data);
            // update a label, set some hidden inputs, etc.
        },
        error: function (e) {
            console.log(e)
        }
    });
}