title: How to make sure X number of XHR callbacks have fired and finished before i do something?
body: <p>So i have these 4 requests, each of them have their own callback and can fire in any order they want. but i need that before i execute <code>mergeData</code> all the callbacks from the requests have finished successfully.</p>
  
  <p>my problem with the aproach im using right now is that the initial values in the parameters once i call <code>waitForSync</code> dont ever refresh (also i dont feel pretty comfortable with this aproach, i feel like im doing it wrong). 
  anyone to point me in the right direction?</p>
  
  <pre><code>var heroes = requestDataFromAPI('heroes');
  var weapons = requestDataFromAPI('weapons');
  var races = requestDataFromAPI('races');
  var jobs = requestDataFromAPI('jobs');
  
  waitForSync(heroes, weapons, races, jobs);
  </code></pre>
  
  <p>...</p>
  
  <pre><code>function waitForSync(heroes, weapons, races, jobs){
    if (heroes &amp;&amp; weapons &amp;&amp; races &amp;&amp; jobs) {
      mergeData(heroes, weapons, races, jobs);
    }
    else {
      setTimeout(waitForSync, '500', heroes, weapons, races, jobs);
    }
  }
  </code></pre>