title: jQuery When Not Working as expected with Deferred Promises
body: <p>So I have done quite a bit of troubleshooting on this and am banging my head against a wall. For the most part, I'm pretty familiar with promises and how they work, and have used them on a few projects. I'm having a little trouble with getting all my promises to finish in making several calls for different calendar data from the Google Calendar API and for the script to calculate the length of the resulting array to use in callback functions. Here is the relevant code:</p>
  
  <pre><code>(function($){
      var baseUrl = 'https://www.googleapis.com/calendar/v3/calendars/',
          apiKey = 'xxxxxxxxxxxx',
          calendarData = [],
          events = [],
          allCalendars = [],
          eventsToDisplay = 9;
  
      /* Get all the calendars that we have registered */
      function getCalendars() {
          return $.getJSON(ajaxurl, {action: 'wps_get_calendars'});
      }
  
      /*  Get the events for a calendar by the calendar ID */
      function getCalendarEvents(calendarID) {
          return $.getJSON(baseUrl + calendarID + '/events', {
              maxResults: '4',
              orderBy: 'startTime',
              timeMin: moment().format(),
              singleEvents: true,
              key: apiKey
          }).success(function(data){
              calendarData.push(data.items);
      });
  
      /*  Create a collection of promises */
      var promises = getCalendars().then(function(calendars){
          var deferreds = [];
          calendars.forEach(function(calendar){
              deferreds.push( 
                  getCalendarEvents(calendar.googleCalendarId)
              );
          });
          return deferreds;
      });
  
      /*  Wait until all the promises have completed, then sort the events */
      $.when.apply($, promises).then(concatEvents);
  
  })(jQuery);
  </code></pre>
  
  <p>Basically the issue is at the very last call to <code>$.when</code> as I am waiting for the array of promises I have to complete. <code>$.when</code> doesn't seem to be working since if I try to log the <code>calendarData</code> array to the console in the <code>$.when</code> callback, it returns an array that doesn't have a calculated length. The only way I've been able to figure out how to do this is to use <code>setTimeout</code> in the callback, and set it to around 2000 milliseconds, but this isn't ideal since depending on network connectivity, API availability, etc., the time to receive all the data could be completely different.</p>
  
  <p>Just as an idea of what I'm seeing in the console, I get this "length-less" array when I try to log the result in the <code>$.when</code> callback, which can't be iterated through because the script seems to think it's empty:</p>
  
  <p><a href="https://i.stack.imgur.com/ffhsb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ffhsb.jpg" alt="array with no length"></a></p>
  
  <p>Any idea what I'm doing wrong here? Thanks in advance for any help.</p>