title: What are best way to handle jQuery ajax asynchronous calls?
body: <p>I recently started on a project which uses heavy client side jQuery/javascripts. I am struggling to get one of the screen working.</p>
  
  <p>I have function like below:</p>
  
  <pre><code>function init{
    populateTypes();
    populateGroups();
    populateStatuses();
    applyCurrentUserSettings();
  }
  </code></pre>
  
  <p>All <code>populate*</code> methods make ajax calls (<code>$.ajax</code>) to server and poluate some checkbox lists on the view. <code>applyCurrentUserSettings</code> method also makes an ajax request and set the current user selection on the view.</p>
  
  <p>The problem is <code>populate*</code> methods are asynchronous and by the <code>applyCurrentUserSettings</code> method is called, the checkboxlist are empty "sometimes" and the apply method fails.</p>
  
  <p>I can get this work by passing <code>async: false</code> in the <code>$.ajax</code> calls, or chain each ajax call inside another, but I would like to know if there are any better ways/design patterns to handle such scenario.</p>