title: jquery custom deferred functions
body: <p>I have three functions i'm trying to run, the first two are doing some async stuff that need data for the third to use. I want the third function to fire only when 1 and 2 are both done. this is the general structure but the final function is firing before 1 and 2 finish. </p>
  
  <pre><code>function run() {
      var data1 = {};
      var data2 = {};
  
      $.when(first(), second()).done(constructData());
  
      function first() {
          var d = new $.Deferred();
  
          //do a bunch of stuff async
          data1 = {};
  
          d.resolve();
      }
      function second() {
  
  
          var d = new $.Deferred();
  
          //do a bunch of stuff async
          data2 = {};
          d.resolve();
      }
      function constructData() {
          //do stuff with data1 and data2
      }
  
  }
  </code></pre>
  
  <p>Answer was to not call construct data immediately</p>
  
  <pre><code> $.when(first(), second()).done(constructData);
  </code></pre>