javascript - keep track of successful ajax requests / returns

I am trying to find a way to keep track of successful ajax returns using javascript only not jquery or other libs. What I want to do is to show a loading graphic when the function is fired and clear the graphic when all the results are returned. My function breaks up the input and calls a defined number of ajax requests.

I read that there is no straight forward way to do it. I am trying to set up a function to count the successful requests, but I am running into a logical barrier that I can't solve. My basic outline is below:

TIA

Edited to update solution.

The solution is to create ct as a global variable My working code outline is

var ct = 0;//declare outside of function as global


function ajaxcallback(...) { 
...
if (success)
{
//output/do something
ct++; //increase global ct by 1

countajax (total);//call countajax

}
}//end function

function countajax (total)
{
    if (ct == total)
    {
    //turn off loading graphic  
    }
}//end countajax

I开发者_开发技巧 suppose the function countajax is not necessary, the comparison of ct == total can be done without calling the function countajax.

There is actually a very straightforward way to do this:

Call a method from inside every ajax callback, and make sure that this function only actually does anything if all the ajax calls are completed, like this:

(function() {
    var ajax1_done = ajax2_done = ajax3_done = false;

    function ajax1_callback() {
      ajax1_done = true;
      run_when_all_is_done();
    }

    function ajax2_callback() {
      ajax2_done = true;
      run_when_all_is_done();
    }

    function ajax3_callback() {
      ajax3_done = true;
      run_when_all_is_done();
    }

    function run_when_all_is_done() {
      if(ajax1_done && ajax2_done && ajax3_done) {
        //do stuff here
      }
    }
})();

One way to do this is to keep a variable that tracks how many requests you made and another that tracks how many responses you've received. Then after you've kicked off all of your ajax calls start a poller (setInterval) that checks for the response count variable to match the total requests variable.

var totalRequests = 0,
    successfulRequests = 0,
    poller = null;

// psuedo code
totalRequests++;
ajax("http://server.com", function(resp){ successfulRequests++; } /** callback */);

totalRequests++;
ajax("http://server.com", function(resp){ successfulRequests++; } /** callback */);

totalRequests++;
ajax("http://server.com", function(resp){ successfulRequests++; } /** callback */);

// run poller after you've kicked off all your ajax requests
poller = window.setInterval(function(){
  if(totalRequests === successfulRequests){
    alert("all ajax finished");
    window.clearInterval(poller);
    poller = null;
  }
},100);