Question

191

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

rated 0 times [ 192] [ 1] / answers: 1 / hits: 21948 / 12 Years ago, wed, september 5, 2012, 12:00:00

I read through various threads like this one for example.

But it really escapes me how to accomplish the following:

I have 4 functions, and want them happen one after another in sequence. Notice they are in incorrect order, to get my point across. I want the 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 getting lost :(

Isn't there some simple way to do this? Like looping through an array...

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

michaelashelbieh

Add To Favorites

Follow

Total Points: 303

Total Questions: 139

Total Answers: 97

Location: Suriname

Member since Sun, Oct 17, 2021

3 Years ago

answered 12 Years ago jimmieo · Accepted Answer

It's a great chance to start using jQuery Deferred.

Apart from the callbacks-based solution the code is readable, flexible and highly maintainable

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've used setTimeout. The main thing is that in the end of the asynchronous part you need to call d.resolve() to continue chaining methods.