調用多個功能順序jQuery中

可能重複：
Delay to next function in method chain 調用多個功能順序jQuery中

有4個功能...

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); 
}

現在，當我在調用這些我按鈕點擊事件，一個接一個，它不起作用。按鈕單擊事件 -

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

結果應該是像第一功能1個執行&寫入值，則功能2，依此類推。

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

我想知道如何讓這些調用順序執行，以便函數能夠一個接一個地執行。

來源

2013-02-04 Niraj Kumar

您的所有功能都是同時編程的，這是從超時計數開始的。

如果你想打電話給在同一時間順序編寫的功能最乾淨的解決辦法是把它們連：

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

您可以使用此回調模式：

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

你也可以定義你的超時時間，使它們加起來：

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.

但是，如果你這樣做很多，你想排隊的功能越多，那麼最好的就是實現一個隊列，就像在jQuery中所做的那樣。你可以在this related question中看到這樣的實現。

來源

2013-02-04 18:10:16

您的函數按正確的順序調用，但超時會導致它們以相反的順序發生，因爲所有超時在腳本運行時幾乎完全同時設置。

換句話說，您有4個單獨的超時被設置並同時運行。

爲了獲得您正在尋找的效果，應該在超時時間內調用上一個函數中的每個函數。

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(); 
});

看到工作的例子我jsfiddle.

它看起來像你想要的功能執行間隔1秒，所以你將不得不改變所有的超時爲1000，如果這是你的目標。

來源

2013-02-04 18:31:22

調用多個功能順序jQuery中

回答

相關問題