具有多个 ajax 调用的 Jquery 回调

Question

我有几个函数，我根据ajax调用中的列表填充下拉列表：

function getMissions(defaultId) {
    $.getJSON("Defaults/GetMissions", function (result) {
        var dropDownToFill = $('#change-mission');
        fillUpdateDropDown(dropDownToFill, result);
    });
}
function getSectors(defaultId) {
    $.getJSON("Defaults/GetSectors", function (result) {
        var dropDownToFill = $('#change-sector');
        fillUpdateDropDown(dropDownToFill, result);
    });
}

现在，在下拉列表被填充后，我想选择一个特定的项目，但要获得这个项目，我需要另一个ajax，如:

function getDefaultDetails(defaultId) {
   $.ajax({
        type: "GET",
        url: "/Defaults/GetDefault",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: { defaultId: defaultId },
        success: function (response) {
            //code here to select the items from the response
        },
    });
}

主要功能基本上是:

function main(defaultId){
    getMissions(defaultId);
    getSectors(defaultId);
    getDefaultDetails(defaultId);
}

问题是，在< code>fillUpdateDropDown完成之前，已经到达了< code>getDefaultDetails的< code>success回调(dropdowns可能有很多项)。

我试图理解回调，但在我的情况下，我无法实现我的问题。我试过这样的东西：

 $.when(getMissions(defaultId), getSectors(defaultId)).done(getDefaultDetails(defaultId));

但没有成功。

如何做到这一点？

谢谢。

Answer 1

$.when（） 需要可转移的对象（Promise、Deferred、Thenable），就像 $.getJSON（） 的返回值一样。

您还必须将对< code>getDefaultDetails()的调用包装在< code >中。匿名函数中的done()，否则您将执行该函数，并且仅对< code >使用其返回值(< code>undefined)。done()

function getMissions(defaultId) {
    return $.getJSON("Defaults/GetMissions", function (result) {
        var dropDownToFill = $('#change-mission');
        fillUpdateDropDown(dropDownToFill, result);
    });
}

function getSectors(defaultId) {
    return $.getJSON("Defaults/GetSectors", function (result) {
        var dropDownToFill = $('#change-sector');
        fillUpdateDropDown(dropDownToFill, result);
    });
}

function getDefaultDetails() { /* ... */ }

$.when(getMissions(defaultId), getSectors(defaultId))
 .done(function() { getDefaultDetails(defaultId) });