Successive function calls in javascript - are callbacks the only way?

Question

I read various topics, like this one .

But it really eludes me how to do the following:

I have 4 functions and want them to happen one after another in sequence. Please note that they are in the wrong order to get my point. I want to get a result that will output "1, 2, 3, 4"

function firstFunction(){ // some very time consuming asynchronous code... console.log('1'); } function thirdFunction(){ // definitely dont wanna do this until secondFunction is finished console.log('3'); } function secondFunction(){ // waits for firstFunction to be completed console.log('2'); } function fourthFunction(){ // last function, not executed until the other 3 are done. console.log('4'); } 

I tried to figure out callbacks, but am lost :(

Is there an easy way to do this? Like looping through an array ...

Answer 1

This is a great chance to start using jQuery deferred .

In addition to a callback based solution, the code is readable, flexible, and easy to maintain.

http://jsfiddle.net/zerkms/zJhph/

 function firstFunction(){ var d = $.Deferred(); // some very time consuming asynchronous code... setTimeout(function() { console.log('1'); d.resolve(); }, 1000); return d.promise(); } function thirdFunction(){ var d = $.Deferred(); // definitely dont wanna do this until secondFunction is finished setTimeout(function() { console.log('3'); d.resolve(); }, 1000); return d.promise(); } function secondFunction(){ var d = $.Deferred(); setTimeout(function() { console.log('2'); d.resolve(); }, 1000); return d.promise(); } function fourthFunction(){ var d = $.Deferred(); // last function, not executed until the other 3 are done. setTimeout(function() { console.log('4'); d.resolve(); }, 1000); return d.promise(); } firstFunction().pipe(secondFunction).pipe(thirdFunction).pipe(fourthFunction);​ 

PS: as an example of asynchronous code, I used setTimeout . The main thing is that at the end of the asynchronous part you need to call d.resolve() to continue the chain methods.

Further reading: http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Answer 2

The idea is that you would do something like the following, so that as soon as the first function is launched, it will know what needs to be launched, and not for you to figure it out outside the function:

 function firstFunction(callback){ // some very time consuming asynchronous code... console.log('1'); return callback(function(){ alert("Second function finished."); return true; }); } function secondFunction(callback){ // waits for firstFunction to be completed console.log('2'); return callback(); } firstFunction(secondFunction); 

Also see .apply() and .call() .

Answer 3

If I use callbacks, my working solution now looks like this:

  one(two); function one(callb){ console.log('1'); callb(three); } function four(){ console.log('4'); } function two(callb){ console.log('2'); callb(four); } function three(callb){ console.log('3'); callb(); } 

I find it disgusting. How should I track this stuff if there are more than 2-3 sequences? Shudder ...

Answer 4

Some time passed, and I noticed something about deferreds in the jQuery documentation, in particular about the kernel kernel function when .

 $.when( $.ajax("test.aspx") ).then(function(ajaxArgs){ alert(ajaxArgs[1]); /* ajaxArgs is [ "success", statusText, jqXHR ] */ }); 

Sample code taken from http://jqapi.com/#p=jQuery.when

Answer 5

I played with Promise, Sequence, Exception, Callback to understand how it works and finally made this code.

Call the functions with a callback and send the result as a parameter to another function sequentially and get catch errors.

 function firstFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); resolve(par + 1); }, 1000, par); }); } function secondFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); try{ throw "Let make an error..."; } catch(err) { reject(err); } resolve(par + 1); }, 1000, par); }) } function thirdFunction(par) { return new Promise(function (resolve, reject) { console.log("start " + par); setTimeout(function (par) { console.log(par); resolve(par + 1); }, 1000, par); }); } function CatchError(error) { console.log("Exception: " + error); } //Break all chain in second function function ChainBrake() { firstFunction(1) .then(secondFunction) .then(thirdFunction) .catch(CatchError); } //Log error and continue executing chain function ChainContinue() { firstFunction(1) .catch(CatchError) .then(secondFunction) .catch(CatchError) .then(thirdFunction) .catch(CatchError); }