☰

3 つの関数を順番に実行するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript asynchronous callback closures
3 つの関数を順番に実行するにはどうすればよいでしょうか? 質問する

これらの関数を次々に呼び出す必要がある場合、

$('#art1').animate({'width':'1000px'},1000);        
$('#art2').animate({'width':'1000px'},1000);        
$('#art3').animate({'width':'1000px'},1000);

jQuery では次のようなことができることはわかっています:

$('#art1').animate({'width':'1000px'},1000,'linear',function(){
    $('#art2').animate({'width':'1000px'},1000,'linear',function(){
        $('#art3').animate({'width':'1000px'},1000);        
    });        
});

しかし、jQuery を使用しておらず、次のように呼び出すと仮定します。

some_3secs_function(some_value);        
some_5secs_function(some_value);        
some_8secs_function(some_value);

some_3secs_functionを実行し、その呼び出しが終了した後に を実行し、some_5secs_functionその呼び出しが終了した後に を呼び出すには、この関数をどのように呼び出したらよいでしょうかsome_8secs_function?

アップデート：

これはまだ機能しません:

(function(callback){
    $('#art1').animate({'width':'1000px'},1000);
    callback();
})((function(callback2){
    $('#art2').animate({'width':'1000px'},1000);
    callback2();
})(function(){
    $('#art3').animate({'width':'1000px'},1000);
}));

3つのアニメーションが同時に開始されます

私の間違いはどこですか?

ベストアンサー1

Javascriptには、同期そして非同期機能。

同期関数

JavaScriptのほとんどの関数は同期的です。複数の同期関数を続けて呼び出すと、

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

それらは順番に実行されます。 は、が完了するdoSomethingElseまで開始されません。 また、 は、が完了するまで開始されません。doSomethingdoSomethingUsefulThisTimedoSomethingElse

非同期関数

しかし、非同期関数はお互いを待つことはありません。上記と同じコードサンプルを見てみましょう。今回は関数が非同期であると仮定します。

doSomething();
doSomethingElse();
doSomethingUsefulThisTime();

関数は順番に初期化されますが、すべてほぼ同時に実行されます。どの関数が最初に終了するかを常に予測することはできません。実行時間が最も短い関数が最初に終了します。

しかし、場合によっては、非同期関数を順番に実行したい場合もあれば、同期関数を非同期に実行したい場合もあります。幸いなことに、これはそれぞれコールバックとタイムアウトで可能です。

コールバック

some_3secs_function、、some_5secs_functionの順に実行したい 3 つの非同期関数があるとしますsome_8secs_function。

Javascript では関数を引数として渡すことができるため、関数が完了した後に実行するコールバックとして関数を渡すことができます。

このような関数を作成すると

function some_3secs_function(value, callback){
  //do stuff
  callback();
}

次のように順番に呼び出すことができます。

some_3secs_function(some_value, function() {
  some_5secs_function(other_value, function() {
    some_8secs_function(third_value, function() {
      //All three functions have completed, in order.
    });
  });
});

タイムアウト

Javascript では、一定のタイムアウト (ミリ秒単位) 後に関数を実行するように指示できます。これにより、同期関数を非同期で動作させることができます。

同期関数が 3 つある場合は、setTimeout関数を使用してそれらを非同期的に実行できます。

setTimeout(doSomething, 10);
setTimeout(doSomethingElse, 10);
setTimeout(doSomethingUsefulThisTime, 10);

しかし、これは少し醜いし、DRY原則[wikipedia]関数の配列とタイムアウトを受け入れる関数を作成することで、これを少し整理することができます。

function executeAsynchronously(functions, timeout) {
  for(var i = 0; i < functions.length; i++) {
    setTimeout(functions[i], timeout);
  }
}

これは次のように呼び出すことができます:

executeAsynchronously(
    [doSomething, doSomethingElse, doSomethingUsefulThisTime], 10);

要約すると、同期して実行したい非同期関数がある場合はコールバックを使用し、非同期で実行したい同期関数がある場合はタイムアウトを使用します。

おすすめ記事