等待过去的功能完成以开始新的功能

Question

我有 4 个 Ajax 函数，第一个是独立的， 但所有其他三个功能都依赖于之前的功能。 真实例子： 我有国家、省、区、镇和路 国家可以直接调用 而所有其他人都必须等到之前的人
我确保所有功能都正常工作并且它们获取数据， “所以ajax请求没有问题”。 在我尝试了这两种方法之后：

$.when(GetCountry()).then(function(){
    GetGovernerate();
}).then(function(){
    GetDistrict(GovernerateID);
}).then(GetTown(DistrictID)).then(function(){
    GetRoad(TownID)
});

我也试过 done 方法：

$.when(GetCountry()).done(function(){
    GetGovernerate();
}).done(function(){
    GetDistrict(GovernerateID);
}).done(GetTown(DistrictID)).done(function(){
    GetRoad(TownID)
});

结果是他们都得到了治理元素，其余的都没有被调用（解决）。 我查看了控制台是否有任何错误， 但没有什么可显示的。

我为它做了一个解决示例，但这不如回调函数高效：

setTimeOut(function(){
    GetGovernerate()
},150,function(){
    setTimeOut(function(){
        GetDistrict();
    },150,function(){
        GetTown();
    });
});

我已经查看了 jquery 的解释，但我不理解它。 谁能让我更容易理解。

Answer 1

这是适合您的工作代码。我不得不添加sleep 来模拟ajax 延迟。

你的问题是你没有返回函数调用的承诺。

Working Fiddle

//Chain one after another using previous object
$.when(GetCountry()).then(function() {
  return GetGovernerate();
}).then(function() {
  return GetDistrict();
}).then(function() {
  return GetTown();
}).then(function() {
  return GetRoad();
}).done(function() {
  $("body").append("<p>all done</p>");
});

//all needed functions
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function GetCountry() {
  $("body").append("GetCountry<br>");
  return sleep(1000);
}

function GetGovernerate() {
  $("body").append("GetGovernerate<br>");
  return sleep(1000);
}

function GetDistrict() {
  $("body").append("GetDistrict<br>");
  return sleep(1000);
}

function GetTown() {
  $("body").append("GetTown<br>");
  return sleep(1000);
}

function GetRoad() {
  $("body").append("GetRoad<br>");
  return sleep(1000);
}