title: Calling multiple functions sequentially in jquery
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/14365318/delay-to-next-function-in-method-chain">Delay to next function in method chain</a>  </p>
  </blockquote>
  
  
  
  <p>There are 4 functions...</p>
  
  <pre><code>function fn1()
  {   
      setTimeout(function()
      {
          $("#div_result_area").append('Calling from function 1&lt;br/&gt;');
      },5000);
  }
  function fn2()
  {   
      setTimeout(function()
      {
          $("#div_result_area").append('Calling from function 2&lt;br/&gt;');
      },4000);
  }
  function fn3()
  {   
      setTimeout(function()
      {
          $("#div_result_area").append('Calling from function 3&lt;br/&gt;');
      },3000);     
  }
  function fn4()
  {   
      setTimeout(function()
      {
          $("#div_result_area").append('Calling from function 4&lt;br/&gt;');
      },1000);
  }
  </code></pre>
  
  <p>Now, when I am calling these in my button click event, one by one, it doesn't work. The button click event - </p>
  
  <pre><code>$("#cmd_sync_tally").click(function(event){
      event.preventDefault();
      fn1();
      fn2();
      fn3();
      fn4();
  });
  </code></pre>
  
  <p>The result should have been like first function 1 executes &amp; writes the value, then function 2 and so on. </p>
  
  <pre><code>Calling from function 4
  Calling from function 3
  Calling from function 2
  Calling from function 1
  </code></pre>
  
  <p>I wonder, how to make these calls sequential, so that functions execute one after another.</p>