Elegant javascript - making function fire when 3 different AJAX requests have happened

Question

I have three different AJAX queries that I want to hit various services. When they've all come back (or timed out) I'd like them to call a function.

I can imagine lots of ways of doing this, like having an intermediate function count when all the requests have come in, but is there a beautiful solution?

Are you using any JS libraries? Any reason you have not [accepted answers to your solved questions](http://tinyurl.com/so-accept)? — Matt Ball, Sep 09 '11 at 14:48
You might be able to do something like this using jquerys [queue](http://api.jquery.com/queue/) function. Btw, you should probably accept the answers to some questions (assuming they're acceptable) as people will be much more willing to help then. — Richard Dalton, Sep 09 '11 at 14:49

score 3 · Accepted Answer · answered Sep 09 '11 at 14:50

3

jQuery allows you to do what you want. See

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

Naturally this only works if you are using jQuery, or can use jQuery.

answered Sep 09 '11 at 14:50

hvgotcodes

118,147
33
203
236

addendum: furthermore, jQuery. But seriously, the concept of deferreds/promises is definitely what you are looking for to do this elegantly. – nwellcome Sep 09 '11 at 14:52
This is indeed exactly what I was looking for. Also, haven't come across the when and then functions. Extremely interesting, thanks all. – Jim Sep 09 '11 at 15:22

score 0 · Answer 2 · edited May 23 '17 at 11:54

You can accomplish this easily with jQuery using the complete callback

var checked = 0;

$(function() {
    $.ajax({ url: "1st ajax", complete: function(){ checked++; Check(); }});
    $.ajax({ url: "2nd ajax", complete: function(){ checked++; Check(); }});
    $.ajax({ url: "3rd ajax", complete: function(){ checked++; Check(); }});
}

function Check() {
    if (checked >= 3) {
        // all 3 have been successfully completed or timedout
    }
}

or using then() deferred object to call the sequentially:

$.get("1st ajax").then(function(){ 
    $.get("2nd ajax").then(function(){ 
        $.get("3rd ajax").then(function(){ 
            // call something
        });
    });
});

or using then() deferred object to call them without waiting with Check() method:

$.get("1st ajax").then(function(){ checked++; Check(); });
$.get("2nd ajax").then(function(){ checked++; Check(); });
$.get("3rd ajax").then(function(){ checked++; Check(); });

score 0 · Answer 3 · answered Sep 09 '11 at 14:55

If you are using jQuery 1.5 or later, you can use the jQuery.when method. For example:

$.when($.ajax("/page1.php"),
       $.ajax("/page2.php")).done(function(a1,  a2) {
           /* a1 and a2 are arguments resolved for the 
              page1 and page2 ajax requests, respectively */
           var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
           if ( /Whip It/.test(jqXHR.responseText) ) {
               alert("First page has 'Whip It' somewhere.");
           }
});

Otherwise, see the Promises/A design pattern.

score -1 · Answer 4 · answered Sep 09 '11 at 14:48

-1

Hmm, maybe you could have a boolean value set to true once the last function called is executed fully? I suppose that this would pose a problem if the functions are being executed asynchronously, though.

answered Sep 09 '11 at 14:48

Frank Allenby

4,332
1
17
17

Elegant javascript - making function fire when 3 different AJAX requests have happened

4 Answers4