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

Question

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

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

我也试过完成方法：

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

结果是他们两个都拿到了governerate元素，剩下的都没有调用（resolved）。我查看了控制台是否有任何错误，但没有什么可显示的。

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

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

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

Wait The past function to finish to start a new one

javascript

jquery

jquery-deferred