StackOverflow Question: Waiting forAsynchronous AJAX Requests

http://stackoverflow.com/q/25255686/1093087

HTML

<p>Calls Complete: <span class="calls-complete">0</span></p>
<p>Time Expired: <span class="ms-expired">0</span> ms</p>
<h5>open console for additional debug information</h5>

JavaScript

MIN_DELAY = 200;
MAX_DELAY = 2000;
var ms_start = Date.now();

function mockAjaxCall() {
  var deferred = jQuery.Deferred();
  var ms_delay = Math.floor(Math.random() * (MAX_DELAY - MIN_DELAY + 1)) + MIN_DELAY;
  
  setTimeout(function() {
    deferred.resolve(ms_delay);
  }, ms_delay);
  
  return deferred;
}

function collectAllThatData() {
  var allCallsComplete = jQuery.Deferred();
  var callsPending = [];
  var callsComplete = [];
  
  // Let's mock 40 asynchronous AJAX calls with random delays
  for (var i=0; i<10000; i++) {
    var promise = mockAjaxCall();
    callsPending.push(promise);
  }
  
  jQuery.each(callsPending, function(n, callPending) {
    jQuery.when(callPending).done(function(x) {
      callsComplete.push(callPending);
      console.log(x);
    });
  });
  
  var intervalId = setInterval(function() {
    var ms_expired = Date.now() - ms_start;
    $('span.ms-expired').text(ms_expired);
    $('span.calls-complete').text(callsComplete.length);
    console.log(callsComplete.length, 'calls complete');
      
    if ( callsComplete.length >= callsPending.length ) {
      clearInterval(intervalId);
      alert(allCallsComplete[0]);
      allCallsComplete.resolve(callsComplete);
    }
  }, 250);
  
  return allCallsComplete;
}

var allThatDataCollected = collectAllThatData();

jQuery.when(allThatDataCollected).then(function() {
  console.log('Data has been collected!');
});