How do you make javascript code execute *in order*

Question

Okay, so I appreciate that Javascript is not C# or PHP, but I keep coming back to an issue in Javascript - not with JS itself but my use of it.

I have a function:

Answer 1

You need to think of JavaScript as event based rather than procedural if you're doing AJAX programming. You have to wait until the first call completes before executing the second. The way to do that is to bind the second call to a callback that fires when the first is finished. Without knowing more about the inner workings of your AJAX library (hopefully you're using a library) I can't tell you how to do this, but it will probably look something like this:

showLoader();

  updateStatus('cron1', function() {
    updateStatus('cron2', function() {
      updateStatus('cron3', function() {
        updateStatus('cronEmail', function() {
          updateStatus('cronHourly', function() {
            updateStatus('cronDaily', funciton() { hideLoader(); })
          })
        })
      })
    })
  })
});

The idea is, updateStatus takes its normal argument, plus a callback function to execute when it's finished. It's a reasonably common pattern to pass a function to run onComplete into a function which provides such a hook.

Update

If you're using jQuery, you can read up on $.ajax() here: http://api.jquery.com/jQuery.ajax/

Your code probably looks something like this:

function updateStatus(arg) {
  // processing

  $.ajax({
     data : /* something */,
     url  : /* something */
  });

  // processing
}

You can modify your functions to take a callback as their second parameter with something like this:

function updateStatus(arg, onComplete) {
  $.ajax({
    data : /* something */,
    url  : /* something */,
    complete : onComplete // called when AJAX transaction finishes
  });

}

Answer 2

As others have pointed out, you don't want to do a synchronous operation. Embrace Async, that's what the A in AJAX stands for.

I would just like to mention an excellent analogy on sync v/s async. You can read the entire post on the GWT forum, I am just including the relevant analogies.

Imagine if you will ...

You are sitting on the couch watching TV, and knowing that you are out of beer, you ask your spouse to please run down to the liquor store and fetch you some. As soon as you see your spouse walk out the front door, you get up off the couch and trundle into the kitchen and open the fridge. To your surprise, there is no beer!

Well of course there is no beer, your spouse is still on the trip to the liquor store. You've gotta wait until [s]he returns before you can expect to have a beer.

But, you say you want it synchronous? Imagine again ...

... spouse walks out the door ... now, the entire world around you stops, you don't get to breath, answer the door, or finish watching your show while [s]he runs across town to fetch your beer. You just get to sit there not moving a muscle, and turning blue until you lose consciousness ... waking up some indefinite time later surrounded by EMTs and a spouse saying oh, hey, I got your beer.

That's exactly what happens when you insist on doing a synchronous server call.

Answer 3

Install Firebug, then add a line like this to each of showLoader, updateStatus and hideLoader:

Console.log("event logged");

You'll see listed in the console window the calls to your function, and they will be in order. The question, is what does your "updateStatus" method do?

Presumably it starts a background task, then returns, so you will reach the call to hideLoader before any of the background tasks finish. Your Ajax library probably has an "OnComplete" or "OnFinished" callback - call the following updateStatus from there.