Proper explanation of JavaScript execution order

Question

I know there are lots of question on this subject, but all of them are tailored to a specific case. I'm asking this question and hoping for an answer that everyone can use when looking into this matter.

Say I have three functions that need to be executed in order, and they all do something async.

For two functions it's simple with a callback:

var fOne = function(callback) {
  // do stuff
  callback();
};

var fTwo = function() {
  // do stuff
};

Calling:

fOne(fTwo);

Makes fTwo to be run after fOne is complete. How does one add fThree into this case so that it is run after fTwo, which is run after fOne?

depends when you want fThree to execute

Huangism
– Huangism

2013-03-26 18:19:04 +00:00
Commented Mar 26, 2013 at 18:19 — Huangism
– Huangism, Commented Mar 26, 2013 at 18:19
This has nothing to do with jQuery.

David G
– David G

2013-03-26 18:20:25 +00:00
Commented Mar 26, 2013 at 18:20 — David G
– David G, Commented Mar 26, 2013 at 18:20
edited my question accordingly

Difusio
– Difusio

2013-03-26 18:20:29 +00:00
Commented Mar 26, 2013 at 18:20 — Difusio
– Difusio, Commented Mar 26, 2013 at 18:20

Mahn · Accepted Answer · 2013-03-26 18:20:59Z

2

Basically, if I understand your question right, you'll want to pass a lambda to fOne in order to be able to add arguments to fTwo, then have fTwo collect the callback and call it like fOne does.

var fOne = function(callback) {
  // do stuff
  callback();
};

var fTwo = function(callback) {
  // do stuff
  callback();
};

var fThree = function() {
  // do stuff
};

fOne(function() { fTwo(fThree); }); // <- lambda

answered Mar 26, 2013 at 18:20

Mahn

16.7k17 gold badges66 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2013-03-26 18:21:48Z

1

Since you're not using deferred and promises to run simultaneous asyncronous actions, but rather just starting one when the other has completed, adding a third goes pretty much the same way:

var fOne = function(callback) {
   console.log('1')
   callback();
};

var fTwo = function(callback) {
   console.log('2')
   callback();
};

var fThree = function() {
   console.log('3')
};

fOne(function() {
    fTwo(function() {
        fThree();
    });
});

FIDDLE

answered Mar 26, 2013 at 18:21

adeneo

319k29 gold badges410 silver badges392 bronze badges

5 Comments

Difusio Over a year ago

This is still not giving the right result for me, would using deferreds be a better option?

adeneo Over a year ago

It executes the functions in perfect order, what result are you expecting ?

Difusio Over a year ago

I think I haven't given enough information. fOne and fTwo both fill an iframe with content. They need to be doing that one after another due to login issues. Therefore fTwo is in the callback of fOne. In fTwo all my code is in a .load block where a button is pressed that leads to a second page. fThree can't be called until the new load is done, I'm starting to think my problem is in there.

adeneo Over a year ago

@Difusio - That's something completely different, and what you need to do is bind handlers to the onload events of the iframe when you change the source or whatever it is you do. Just stacking functions wont do the trick.

Mahn Over a year ago

@Difusio if you are talking about the jQuery load function, place your callback within the callback of the load call, e.g. $("#stuff").load(url+" "+elementID, function() { fThree(); })

dfsq · Accepted Answer · 2013-03-26 19:09:47Z

1

One more approach I came up with:

var stack = [fOne, fTwo, fThree];
stack.shift()(function() {
    stack.shift()(stack[0]);
});

Where you define your functins as:

function fOne(callback) {
    setTimeout(function() { // <-- example of async task
        alert('fOne done');
        callback && callback();
    }, 1000);
}

http://jsfiddle.net/kRMr8/2/

edited Mar 26, 2013 at 19:09

answered Mar 26, 2013 at 18:50

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Proper explanation of JavaScript execution order

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related