title: Execute Function One by One
body: <p>I have 3 different jQuery functions like:</p>
  
  <pre><code>function step1() {
    ...
  }
  
  function step2() {
    ...
  }
  
  function step3() {
    ...
  }
  </code></pre>
  
  <p>and if I call them like this:</p>
  
  <pre><code>step1();
  step2();
  step3();
  </code></pre>
  
  <p>they will be all executed in the same time. How can I call them one by one so <code>step2();</code> is called after <code>step1();</code> is finished and <code>step3();</code> is called after <code>step2();</code> is finished.</p>
  
  <p><b>// MORE INFO</b></p>
  
  <p><code>Step1()</code> is executing a json and appends details to html, <code>Step2()</code> is executing another json and appends info in the divs created by <code>Step1()</code> and <code>Step3()</code> simply hides a loading animation.</p>
  
  <p><b>// THE FUNCTIONS</b></p>
  
  <p>As requested by some users, here are the functions:</p>
  
  <pre><code>jQuery.noConflict();
  
  jQuery(document).ready(function($) {
  
      var cardType = $.cookie('cardType');
      var categoryID = $.cookie('categoryID');
  
      function step1() {
          $.getJSON('http://domain.com/benefits/active/all.json', function(data) {
              $.each(data, function(i,item){
                  if (item.benefit_type_id == categoryID) {
                      content = '&lt;li&gt;&lt;a class="showDetails" data-offer-description="' + item.description + '" data-offer-period="' + item.begin_date + ' - ' + item.end_date + '"&gt;&lt;div class="company" title="' + item.business_id + '"&gt;&lt;/div&gt;&lt;div class="shortdescription"&gt;' + item.name + '&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;';
                      $(content).appendTo("#thelist");
                  }
              }); 
              step2();
          });
      } // function step1();
  
      function step2() {  
          $('.company').each(function(i, item) {
              var tempTitle = item.title;
              $.getJSON('http://domain.com/businesses/from_list/' + tempTitle + '.json', function(data2) {
                  $.each(data2, function(i,item){
                      content = '&lt;span&gt;' + item.name + '&lt;/span&gt;';
                      $(content).appendTo("div[title='" + tempTitle + "']");
                  }); 
                  step3();
              });
          });
      } // function step2();
  
      function step3() {
          loaded();
          $('#loading').delay(1000).fadeOut('slow', function() {
              // Animation complete.
          });
      } // function step3();
  
      step1();
  
  });
  </code></pre>