title: Trigger a function only after the completion of multiple AJAX requests
body: <p>I've got a particular function I want to run once, and only after the completion of several AJAX requests.</p>
  
  <p>My current solution looks a bit like this:</p>
  
  <pre><code>function doWork() {
      //This is the function to be run once after all the requests
  }
  
  //some tracking/counting variables
  var ajaxDoneCounter = 0;
  var numOfAjaxRequests = 5;
  var workDone = false;
  
  function doWorkTrigger() {
      ajaxDoneCounter++;
      if( !workDone &amp;&amp; ajaxDoneCounter &gt;= numOfAjaxRequests ) {
          workDone = true;
          doWork();
      }
  }
  
  // ...
  
  //and a number of ajax requests (some hidden within functions, etc)
  //they look something like this:
  $.ajax({
      url: "http://www.example.com",
      dataType: "json",
      success: function( data ) {
          //load data in to variables, etc
          doWorkTrigger();
      }
  });
  </code></pre>
  
  <p>One obvious pitfall in the above is that any AJAX call that is not successful will not increment <code>ajaxDoneCount</code> and so <code>doWork()</code> will probably never be called. I can get around that using the <code>error</code> callback in inside any <code>$.ajax</code>, so that doesn't worry me too much.</p>
  
  <p>What I want to know is whether the above is safe and/or good practice?<br>
  Is there a trick I've missed, or any thing else that might work better?</p>