jQuery.when()似乎没有等待

Question

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

1. 用户点击复选框(或其他内容)
2. 微调器淡入,UI变得不可用
3. 进行服务器端调用,并获取一些JSON
4. UI中的标签使用JSON中的值进行更新
5. 微调器淡出,UI再次可用

我遇到的问题是4和5经常被反转,并且在标签更新之前,微调器有时会消失2或3秒.

我正在尝试使用.when()来确保没有发生这种情况,但我似乎没有做得对.我一直在看这个帖子,这个和jquery自己的文档.

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

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,并按预期更新标签.

我只需要那个dang微调器等待并淡出,直到标签更新为止.

Answer 1

问题是因为你没有给出$.when()承诺.事实上,你正在给它,null所以它立即执行.你可以通过返回$.ajax你的SaveCampaign()函数提供的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)
        }
    });
}