title: Making multiple AJAX calls $.when.apply($, array) not working properly
body: <p>I am trying to learn more about ajax calls and doing some testing. I am running into a snag due to async.. With the help of <a href="https://medium.com/sungthecoder/making-multiple-ajax-calls-and-deciphering-when-apply-array-b35d1b4b1f50" rel="nofollow noreferrer">this website</a> I have found what I believe should work.. Somehow things still arent running properly. I have fiddled a ton, but still have yet to make things work how Id like.</p>
  
  <p>Background:</p>
  
  <ol>
  <li>Capturing a variable amount of ids in <code>array</code></li>
  <li>Iterating through <code>$.ajax</code> calls to update ids (api batch request not possible).</li>
  </ol>
  
  <hr>
  
  <pre><code>$(document).ready(function() {
    $("#button").click(function() {
      var deffered, deferreds = [];
      $.each(arr, function(i, array) {
        deferred = $.ajax({ ...
          success: function(data) {console.log('complete');},
          error: function(data) {...}
        });
        deferreds.push(deferred);
      });
      $.when.apply($, deferreds).done(console.log('done'));
    });
  });
  </code></pre>
  
  <p>When running code above (also see <a href="https://jsfiddle.net/37816/rws5mfhn/" rel="nofollow noreferrer">fiddle</a> for more details) and checking my console.log it shows 'done' occurring before any 'completes' are made (picture below).</p>
  
  <p>Please help me understand what is wrong with code. I want all ajax calls to <code>console.log('complete')</code> before the <code>console.log('done')</code>. From my understanding that is the point of <code>$.when.apply</code>.</p>
  
  <p><img src="https://i.stack.imgur.com/jFCWu.png" /></p>