Jquery Deferred Doesn't get to the last. Then

Question

I have a sequence of functions that must be executed. All of them are executed sequentially, except for the latter. d1 executes, executes d2, executes d3, then the code inside the executed function is executed until resolution d4. I can’t understand why. Any help would be appreciated.

$(document).ready(function() { var d1 = functiond1(); var d2 = functiond2(); var d3 = functiond3(); var d4 = functiond4(); d1.then(d2).then(d3).then(d4).done(function() { //Code here does not wait for d4 to end before executing //HELP! }); }); function functiond1() { var dfd = $.Deferred(); //Do stuff here //Works in sequence dfd.resolve(); return dfd.promise(); } function functiond2() { var dfd = $.Deferred(); params = jQuery.param({ 'parm1': 1, 'parm2': 2, 'parm3': 3 }); jQuery.getJSON($.webMethoJSONGet1, params).done(function(data) { //Do stuff here //Works in sequence dfd.resolve(); }); return dfd.promise(); } function functiond3() { var dfd = $.Deferred(); //Do stuff here //Works in sequence dfd.resolve(); return dfd.promise(); } function functiond4() { var dfd = $.Deferred(); params = jQuery.param({ 'parm1': 1, 'parm2': 2, 'parm3': 3 }); jQuery.getJSON($.webMethoJSONGet2, params).done(function(data) { //Do stuff here //does not work in sequence dfd.resolve(); }); return dfd.promise(); } 

Answer 1

It is hard to say what you are trying to do with these promises. First you call all 4 functions, and then try to connect them with a then callback chain. If you want to consistently combine them together, it should look like this:

 functiond1() .then(functiond2) .then(functiond3) .then(functiond4) .done(function() { /* blah */ }); 

If you want the result to be completed, you can use $.when

 $.when(functiond1(), functiond2(), functiond3(), functiond4()) .then(function(resultd1, resultd2, resultd3, resultd4) { /* blah */ }); 

On the other hand, in your functions, you create promises that are allowed in the done callback of another promise that is not needed. Calls to $.getJSON.done() return a promise, so no additional promise is required. Just return the promise returned with done() .

Sorry, I haven't messed up a lot with deferred jQuery objects, but they seem pretty similar to standard promises.

Answer 2

To run functions sequentially, you need to pass references to functions in the .then chain, and not the results of calling these functions.

eg.

 var d1 = functiond1; // NB: no () ... d1.then(d2).then(d3).then(d4).done(...); functiond1().then(functiond2).then(functiond3).then(functiond4).done(...) 

The ultimate cause of your problem is that calling d4 immediately lead to an allowed promise accurate to .done right away, regardless of the state of the previous part of the .then chain.

You should also not wrap your JSON functions with additional promises, since $.getJSON already returns a promise that will be rejected if the AJAX request fails:

 function functiond4() { ... return $.getJSON(...); } 

Answer 3

I ran into the same problem in the project, this array solution works well:

 $(document).ready(function() { var pr = []; var d1 = functiond1(); var d2 = functiond2(); var d3 = functiond3(); var d4 = functiond4(); function functiond1() { var dfd = $.Deferred(); pr.push(dfd); setTimeout(function(){ $('body').append('1 resolved <br>'); dfd.resolve(); }, 2000); } function functiond2() { var dfd = $.Deferred(); pr.push(dfd); params = jQuery.param({ 'parm1': 1, 'parm2': 2, 'parm3': 3 }); setTimeout(function(){ $('body').append('2 resolved <br>'); dfd.resolve(); }, 3000); } function functiond3() { var dfd = $.Deferred(); pr.push(dfd); setTimeout(function(){ $('body').append('3 resolved <br>'); dfd.resolve(); }, 1000); } function functiond4() { var dfd = $.Deferred(); pr.push(dfd); params = jQuery.param({ 'parm1': 1, 'parm2': 2, 'parm3': 3 }); setTimeout(function(){ $('body').append('4 resolved <br>'); dfd.resolve(); }, 50); } $.when.apply($, pr).then(function() { // do something $('body').append('proceed with code execution'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>