Calling multiple functions sequentially in jquery

Question

Possible Duplicate:
Delay to next function in method chain

There are 4 functions...

function fn1()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
    },5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
    },4000);
}
function fn3()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 3<br/>');
    },3000);     
}
function fn4()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 4<br/>');
    },1000);
}

Now, when I am calling these in my button click event, one by one, it doesn't work. The button click event -

$("#cmd_sync_tally").click(function(event){
    event.preventDefault();
    fn1();
    fn2();
    fn3();
    fn4();
});

The result should have been like first function 1 executes & writes the value, then function 2 and so on.

Calling from function 4
Calling from function 3
Calling from function 2
Calling from function 1

I wonder, how to make these calls sequential, so that functions execute one after another.

score 2 · Accepted Answer · edited May 23 '17 at 12:10

All your functions are programmed at the same time, which is the start from the timeout count.

If you want to call functions programmed at the same time sequentially the cleanest solution is to chain them :

function fn1() {   
    setTimeout(function() {
        $("#div_result_area").append('Calling from function 1<br/>');
        f2();
    },5000);
}

You can use the callback pattern for this :

function fn1(callback) {   
    setTimeout(function() {
        $("#div_result_area").append('Calling from function 1<br/>');
        callback();
    },5000);
}
...
fn1(function(){
   fn2(function(){
      fn3(fn4)
   });
});

You could also define your timeouts so that they add up :

var time = 0;
function fn1() {   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
    },time+=5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
    },time+=4000);
}
etc.

But if you do this a lot, with more functions that you want to queue, then the best would be to implement a queue, as is done in jQuery. You can see such an implementation in this related question.

score 0 · Answer 2 · answered Feb 04 '13 at 18:31

your functions are being called in the right order but the timeouts are causing them to occur in the opposite order because all of the timeouts are being set at almost exactly the same time when the script runs.

in other words you have 4 separate timeouts being set and running at the same time.

to get the effect that you are looking for you should call each function from within the previous function on the time out.

function fn1()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 1<br/>');
        fn2();
    },5000);
}
function fn2()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 2<br/>');
        fn3();
    },4000);
}
function fn3()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 3<br/>');
        fn4();
    },3000);     
}
function fn4()
{   
    setTimeout(function()
    {
        $("#div_result_area").append('Calling from function 4<br/>');
    },1000);
}

$("#cmd_sync_tally").click(function(event){
    event.preventDefault();
    fn1();
});

see a working example at my jsfiddle.

it looks like you are wanting the functions to execute 1 second apart so you would have to change all of the timeouts to be 1000 if that is your goal.

Calling multiple functions sequentially in jquery

2 Answers2