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

问题是getDefaultDetails的success回调在fillUpdateDropDown完成之前到达(下拉列表可能有很多项目(。

我正在努力理解回调，但就我而言，我无法解决我的问题。我试过这样的东西：

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

但没有成功。

如何执行？

谢谢。

Answer 1

$.when()期望与$.getJSON()的返回值类似的可用对象(Promise、Deferred、thenable(。

您还必须将.done()中对getDefaultDetails()的调用封装在一个匿名函数中，否则您将执行该函数，并且仅将其返回值(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) });