Javascript and timing, specifically with callbacks.

Question

I want to make sure I understand callbacks properly, and javascript timing etc. in general.

Say my code looks like this, is it gauranteed to execute in order?

SetList();  // initilizes the var _list

Some.Code(_list, function(data) {

      // update list

});

DoSomething(_list);   // operates on _list

Update

What I am seeing is SetList calls, then DoSomething, then Some.Code.

Some.Code calls another function. so:

Some.Code(_list, function() {

    //load _list from ajax request
    Other.Code.WithCallback(_list, function(){....});

});

I guess to fix this, I have to add DoSomethign to the inner fucntion as another callback?

Answer 1

SetList(), Some.Code() and DoSomething() will execute in that order, one after the other. The anonymous function passed as the second argument to Some.Code() could be called during the execution of Some.Code() (before the function returns and DoSomething() is called) or it could be called at a later time by another function, and event handler or timer, it all depends on when you specified it to be called.

---

Since you're using ajax, the request to the remote server is made on a separate thread, so the executing javascript thread continues to run and call other functions until a response (or, more specifically, for the onreadystatechange event to fire). When the ready state of the ajax request changes, its readystatechange event handler is queued to be called -- meaning it will execute as soon as all currently executing scripts finish.

If you want DoSomething() to execute after the response is received via ajax, you should run it to the end of your callback function instead.

Answer 2

That code would execute in order:

SetList(), then Some.Code(), then function(data), then DoSomething().

JavaScript is single-threaded, and executes in order. The only way that things would happen out of sync is if you set an interval/timer within Some.Code() or function(data) that called another function.

If you had:

var i=0;
functionCall() //some long process that sets i=1;
if (i==1) { alert("In Order!"); } else { alert("Out of Order!"); }

That would alert "In Order," But if you had:

var i=0;
setTimeout(functionCall, 1000) //some long process that sets i=1;
if (i==1) { alert("In Order!"); } else { alert("Out of Order!"); }

That would execute "Out of Order," because the third line would execute before functionCall() is called.

Updated Answer

Because you are using Ajax, I'm guessing you are making an asynchronous call, which is the reason for the delay. You have a callback function, but it's still waiting to be called back, so Javascript moves on to execute the next line while it waits.

To execute in the order you want, you'll need to do this:

SetList();  // initilizes the var _list
Some.Code(_list, function(data) {
  // update list
  DoSomething(_list);   // operates on _list
});

This way, you can ensure that DoSomething() is called when your callback method is called, and not before.