This code will run function a() then b(), even if the ajax request in a() has not yet completed.
There are a lot of approaches that can be used to make sure that b only runs when a is done. One approach would be to use jQuery deferreds like so:
Lets take take a look at a real world example of using events to make sure things happen in the proper order. Here we will use a backbone collection as a wrapper for a one or more Contact objects that will be reused in multiple places in an application:
Let say we want to use this collection to populate a drop down when a view is initialized like so:
Using this code there is a good chance that the models will be an empty array when we try to add them to the dropdown. Also, when the collection's fetch() completes the app.contacts.models array will be reset, meaning that the reference to the contacts in your view likely will not reference the current app.contacts.models array.
To fix this, lets first update our collection to trigger an event when the contacts are loaded. In this example I'm going to use jQuery's trigger(eventName) function to keep things easy:
The last step is to make sure we are adding the carriers to the drop down after they have been added to the collection. To do this we just need to add an event listener to our initialize function:
Now we will always be working with a populated collection in our addContacts method.