title: How to tell when multiple functions have completed with jQuery deferred
body: <p>I have 3 functions which handle data pulled in from AJAX, they update the page after the ajax function is called.</p>
  
  <p>When the AJAX function is called I show a loader, I want to hide the loader after the AJAX has completed and the functions have completed.</p>
  
  <p>How can I use deferred with when and then in jQuery to test once all 3 function are completed.</p>
  
  <p>Here is my AJAX code, this hides the loader on AJAX success at the moment, ideally this would be after the 3 functions have been completed / were successful.</p>
  
  <p>The 3 functions receive data to process and display on the page, they are not AJAX functions.</p>
  
  <pre><code>function setUpStocking() {
      $.ajax({
          url: url,
          cache: false,
          beforeSend: function(){
              // Show loader
              $('.loader').show();
          },
          success: function(data){
  
              updateMyList(data.gifts);
              updateRecievedGift(data.recieved);
              updateGiftsOpenedToday(data.opened);
  
              // Hide loader
              $('.loader').hide();
  
          }
      });
  }
  </code></pre>
  
  <p>The functions are outside the AJAX function:</p>
  
  <pre><code>function updateMyList(gifts) {
      // Get data, process it and add it to page
  }
  
  function updateRecievedGift(recieved) {
      // Get data, process it and add it to page
  }
  
  function updateGiftsOpenedToday(opened) {
      // Get data, process it and add it to page
  }
  </code></pre>