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

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

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

我为此做了一个变通示例，但这不如回调函数有效:

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

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

Answer 1

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

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

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