保证Javascript中的异步请求回调顺序

Question

In Javascript, I have two asychronous requests for data:

$.getJSON('http://foo.com', fooQuery, fooSuccess(data));
$.getJSON('http://bar.com', barQuery, barSuccess(data));

and two callbacks to process the received data:

fooSuccess(data) { // Stuff }
barSuccess(data) { // More Stuff }

How do I ensure barSuccess is executed only after fooSuccess completes?

Notes:

• I want to keep the data requests as they are: asynchronous and non-blocking (since server responses may take a while).
• But, I want the callbacks that process the data to be executed sequentially. That is, I do not want to execute barSuccess until fooSuccess completes.

Thanks so much for your wisdom and help!

Answer 1

Here is how you would do it using the jQuery deferred object that is returned by ajax requests.

var fooDfd = $.getJSON('http://foo.com', fooQuery);
var barDfd = $.getJSON('http://bar.com', barQuery);

fooDfd.then(function(fooData){
    fooSuccess(fooData);
    barDfd.then(barSuccess);
});

​

Answer 2

The best way would be to utilize the jQuery when().done() functionality like this:

$.when(
    $.getJSON('http://foo.com', fooQuery, fooSuccess(data)), 
    $.getJSON('http://bar.com', barQuery, barSuccess(data))
).done(function(arg1, arg2){
    fooSuccess(arg1);
    barSuccess(arg2);
});

This allow simultaneous execution of the AJAX requests and guaranteed execution of the done() function once all requests has successfully completed.

Answer 3

I'm follow this very interesting post from a half an hour ago, when appear the elegant solution presented by @Mike Brant I quickly was to dive in the jquery library to see how the magic is made. Don't you? I recommend, is very interesting! BTW I think we don't need all that magic, not in this case, we have two asynchronous calls handlers(functions), no matter which end first, we need to know when the second end, then all we need is a third function that will be called by the two handlers and act when all the data is ready. I know this approach will vaste four or five lines more of code than the elegant jquery solution, but at the end our brain and soul will be in better condition. Sorry my english.

Answer 4

Put the barSuccess call in the fooSuccess success callback.

fooSuccess(data){
  jQuery.ajax({
    data: data,
    success: function(response){
      barSuccess(data) //should still be in scope, I think?
    }
  }
}