calling multiple functions sequentially in jquery
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/14365318/delay-to-next-function-in-method-chain">Delay to next function in method chain</a>  </p>
</blockquote>



<p>Yup! I tried. Googled it and also read everything here but couldn't really understand. What if my functions aren't ajaxified. In that scenario, how to use jquery deffered pipeline?</p>

<p>Well, the scenario is this - say 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. Here is 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. But the result is totally different.</p>

<pre><code>Calling from function 4
Calling from function 3
Calling from function 2
Calling from function 1
</code></pre>

<p>Since this is a test case, in real scenario, the functions where created to promote modularity and clean reading. I wonder, how to make these calls sequential, so that functions execute one after another.</p>

<p>Requesting your expert advice. </p>
