jQuery: Wait till multiple GET requests are successully processed

Question

I need to issue multiple $.get requests, process their responses, and record the results of the processing in the same array. The code looks like this:

$.get("http://mysite1", function(response){
  results[x1] = y1;
}
$.get("http://mysite2", function(response){
  results[x2] = y2;
}

// rest of the code, e.g., print results

Is there anyway to ensure that all the success functions have completed, before I proceed to the rest of my code?

score 40 · Accepted Answer · answered Mar 27 '12 at 22:50

40

There is a very elegant solution: the jQuery Deferred object. $.get returns a jqXHR object that implements the Deferred interface - those objects can be combined like this:

var d1 = $.get(...);
var d2 = $.get(...);

$.when(d1, d2).done(function() {
    // ...do stuff...
});

Read more at http://api.jquery.com/category/deferred-object/ and http://api.jquery.com/jQuery.when/

answered Mar 27 '12 at 22:50

Niko

25,682
7
85
108

Does that solution still works if I have success functions within $.get calls? I'd tried that before, no luck! – amir Mar 27 '12 at 22:58
Using $.get within $.when().done() does not appear to work any longer – Barry Chapman Mar 14 '19 at 06:19

score 10 · Answer 2 · answered Mar 27 '12 at 22:52

$.when lets you combine multiple Deferreds (which is what $.ajax returns).

$.when( $.get(1), $.get(2) ).done(function(results1, results2) {
    // results1 and results2 will be an array of arguments that would have been
    // passed to the normal $.get callback
}).fail(function() {
    // will be called if one (or both) requests fail.  If a request does fail,
    // the `done` callback will *not* be called even if one request succeeds.
});

jQuery: Wait till multiple GET requests are successully processed

2 Answers2

Linked

Related