Wait for async ajax requests to finish

Question

I'd like to write a function which performs a dozen async ajax requests, wait for all of then to finish and then return aggregated info. Like:

function countHealthy(urls) {
  var healthy = 0;
  for (var i = 0; i < urls.length; ++i) {
    $.ajax({url: urls[i], async: true, id: i})
    .done(function (data) { ++healthy; });
  }
  // Wait for all ajax to finish.
  return healthy;
}

PS: Is the ++healthy thread safe?

hvgotcodes · Answer 1 · 2013-04-05T12:03:03.237

Javascript doesn't have threads so thread safety is not an issue. Your return statement is the problem, it needs to go in the callback that the ajax calls execute on completion. Since ajax happens asynchronously, as your code stands, the return statement will fire before all the requests return.

You might want to check out query deferreds, which seems to be born for this type of thing. Directly from that link

function doAjax() {
  return $.get('foo.htm');
}

function doMoreAjax() {
  return $.get('bar.htm');
}

$.when( doAjax(), doMoreAjax() )
  .done(function() {
    console.log( 'I fire once BOTH ajax requests have completed!' );
  })
  .fail(function() {
    console.log( 'I fire if one or more requests failed.' );
  });

With some minor refactoring you could implement this in about 2 minutes.

Alternatively, if you control the server, you could create a server endpoint that does all the checking in one request.

score 1 · Answer 2 · answered Apr 05 '13 at 12:01

1

You can do this:

var urls= ['url1', 'url2', 'url3', 'url4'];
function doTheUrl() {
    if (urls.length === 0) {
        alert('All urls are done now.');
        return;
    }

    var url = urls.pop();
    $.ajax({
        url: "/DoTheJob",
        complete: function () {
            doTheUrl();
        }
    });
};

answered Apr 05 '13 at 12:01

Catalin

11,503
19
74
147

actually i don't think this will work. there's an implicit `return` at the end of the function. so when the $.ajax call is put on the stack, everything continues to move along and the function exits. i would downvote now. – Randy L Mar 16 '15 at 16:19

score 0 · Answer 3 · answered Apr 05 '13 at 12:05

Maybe you can try this. I'm simply running an empty while loop so that the return statement is not hit until all the ajax calls are returned.

function countHealthy(urls) {
  var healthy = 0;
  var urlCount = urls.length;
  var numberOfAjaxCallsReturned = 0;
  for (var i = 0; i < urls.length; ++i) {
    $.ajax({url: urls[i], async: true, id: i})
      .done(function (data) { 
              ++healthy;
              numberOfAjaxCallsReturned++;
      });
    }
    while(numberOfAjaxCallsReturned!=urlCount)
    {
    }
    return healthy;
}

score 0 · Answer 4 · answered Apr 05 '16 at 16:10

If you have a complex page, you will want to track and wait specifical for just your asynchronous calls to return. This is because other, non-crucual, calls might be running.

That being said, for simple pages you can just check and wait for there to be no calls. This jQuery script checks every quarter to see if there are current asynchronous requests every quarter second. Once there are none, you will proceed.

    var WaitForAjax = function()
    {
        if (jQuery.active == 0){
        }
        else
        {
            setTimeout(WaitForAjax, 250);
        }
    }

    function RunIt()
    {
        //IssueAjaxCalls would be where you make all your Ajax calls.
        IssueAjaxCalls();

        WaitForAjax();

        //The KeepGoing function won't get called until there are no more Ajax calls pending.
        KeepGoing();
    }

score 0 · Answer 5 · edited May 23 '17 at 12:34

First of all you are making an ajax request on each for loop which seems a bit wasting your server resources. If that function will be getting called a lot then i would suggest you to refactor your code to make as less queries as possible.

Anyways, here's how i'd do it

function countHealthy(urls) {

    var healthy = 0;
    var reqs = [];

    for (var i = 0; i < urls.length; ++i) {
        reqs.push(
            $.ajax({
                url: urls[i],
                id: i
            })
        );
    }
}


$.when.apply($, reqs).then(function() {
    // On success
    ++healthy;
}).fail(function() {
    // When failed
}).always(function() {
    // this will be run no matter the outcome
});

Haven't had the chance to try it out, so i'm not sure if i've made a syntax error etc. Changes to your piece of code :

Removed async = true , ignore this if you had set it to be false somewhere in your code before.

You can get an idea of how "when.apply" works, source

Wait for async ajax requests to finish

5 Answers5