Обратные вызовы Jquery с несколькими вызовами ajax

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);
}

Беда в том, что success обратный вызов getDefaultDetailsдостигается до того, как fillUpdateDropDown будет завершено (в раскрывающихся списках может быть много элементов).

Я пытаюсь понять обратные вызовы, но в моем случае я не могу решить свою проблему.Я пробовал что-то вроде:

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

но безуспешно.

Как это сделать?

Спасибо.

Answer 1

$.when() ожидает затем объектов (Обещание, Отложено, Затем) как возвращаемое значение $.getJSON().

Вытакже необходимо обернуть вызов для getDefaultDetails() в .done() в анонимной функции, в противном случае вы выполняете функцию и используете только ее возвращаемое значение (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) });