Wait The past function to finish to start a new one

Question

I have 4 Ajax functions the first is independent , but all the other three functions are dependent on the ones before . Real example : I Have Country , Governorate , District , Town and Road the Country can be called directly while all the others have to wait till the ones before
I made sure that all functions are working right and they get data , "so there is no problem with ajax request ". after I have tried those two methods :

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

I have also tried the done method :

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

The result is that both of them get the governerate elements and all the rest are not called (resolved). i have looked to the console for any error, but nothing to show .

I did a work around example for it but this is not as productive as call back functions :

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

I have looked into the explanation of jquery , but am not understanding it . Can any one please make it easier to me to understand .

You need to return the promise in the `then()` functions if you want the next `then` to wait: `.then(function(){ return GetDistrict(GovernerateID)})` (assuming these functions return promises). — Mark, Dec 14 '18 at 06:29
Possible duplicate of [Resolve promises one after another (i.e. in sequence)?](https://stackoverflow.com/questions/24586110/resolve-promises-one-after-another-i-e-in-sequence) — Just code, Dec 14 '18 at 06:31
https://stackoverflow.com/users/3874623/mark-meyer it work only for the district , but the town and road are not working . — Mark Dibeh, Dec 14 '18 at 06:36
https://stackoverflow.com/users/2630817/just-code I truly did not understand the idea , does this mean , that in each function i have to do a (var promise = $.Deferred(); /*statement of function*/ then i do a return promise.Promise() ? ) — Mark Dibeh, Dec 14 '18 at 06:37
You just need to return the promise, [like this](https://stackoverflow.com/a/31070150/542251) — Liam, Dec 21 '18 at 09:11

Ergec · Accepted Answer · 2018-12-21T09:29:29.837

Here is a working code for you. I had to add sleep to simulate ajax delays.

Your problem is you are not returning promises of function calls.

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

This answer needs an explanation of what you changed and why — Liam, Dec 21 '18 at 09:10
@Liam Edited my answer, I think is better now. Since there are several ways to do this I did my way but now edited it to match his code. — Ergec, Dec 21 '18 at 09:31
I really think the words (to the effect of), "you need to return the promise in your then" need to be in here, that's the nub of the problem here — Liam, Dec 21 '18 at 09:35

Wait The past function to finish to start a new one

1 Answers1