0

重複の可能性:
メソッド チェーンの次の関数への遅延

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

ここで、ボタン クリック イベントでこれらを 1 つずつ呼び出すと、機能しません。ボタンクリックイベント -

$("#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

関数が次々と実行されるように、これらの呼び出しを順次にする方法を知りたいです。

4

2 に答える 2

2

すべての機能が同時にプログラムされます。これは、タイムアウト カウントからの開始です。

同時にプログラムされた関数を順番に呼び出したい場合、最もクリーンな解決策はそれらを連鎖させることです:

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 で行われているように、キューを実装するのが最善です。この関連する質問でそのような実装を見ることができます。

于 2013-02-04T18:10:16.813 に答える
0

関数は正しい順序で呼び出されていますが、スクリプトの実行時にすべてのタイムアウトがほぼ同時に設定されているため、タイムアウトにより逆の順序で関数が呼び出されています。

つまり、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-04T18:31:22.357 に答える