title: JQuery nested $.when to prevent race conditions
body: <p>So I read several posts about how to do this like <a href="https://stackoverflow.com/questions/27530428/jquery-ajax-call-chaining-with-multiple-dependencies">this</a> and <a href="http://www.mechonomics.com/resolving-multiple-jquery-deferreds-using-when/" rel="nofollow noreferrer">this</a>, but I settled on something else that seems to work for this internal LOB application. I was having issues loading database dependencies asynchronously before loading an existing "allocation" (i.e., it was trying to load getAllocation(), getAssignedAssts() etc. before loading the depts, divisions, etc.) so I just put a second $.when/done call inside the doneCallback of the depencies. Like this: </p>
  
  <pre><code>// assume allocationID is defined as allocation id we want to get from db
  $.when(getDept(), getDivisions(), GetAvailComments(), getTargets())
  .done(function msg1, msg2, msg3, msg4) {
      // initialize variables, knockout observables and observable arrays
  
      $.when(getAllocation(allocationID), getAssignedAssts(allocationID), getAssignedTeachers(allocationID))
      .done(function msg1, msg2, msg3) {
      });
  })
  .fail(function jqXHR, textStatus, errorThrown) {
      alert('Error getting Allocation: ' + jqXHR.status + ' ' + textStatus + ', ' + errorThrown + '&lt;br /&gt;' + jqXHR.responseText);
  });
  </code></pre>
  
  <p>Assume getDept(), getDivisions(), etc. exist and return an ajax promise like this:</p>
  
  <pre><code>function getDept() {
      var data = { plan_id: getParameterByName('plan_id') };
  
      return $.ajax({
          type: "POST",
          url: "Plan_Edit.aspx/PlanDept",
          data: JSON.stringify(data),
          contentType: "application/json; charset=utf-8",
          dataType: "json"
      });
  };
  </code></pre>
  
  <p>My question is whether this is bad, and if so, what is the "right" way to do this?</p>