非同期機能のsetTimeout

Question

私は、起動する前に5000msの遅延が必要な非同期機能を持っています。私はこれを達成するためにsetTimeout()を使用しようとしています。この非同期関数は、複数回実行されるループで発生し、非同期関数が毎回異なるデータを渡すため、setInterval()はここでは使用できません。

問題：非同期機能は何が起こった、と私はそれをどのように解決することができます

Javascriptのコード

5件の Doneメッセージがinstantly`遅延（コンソールプリントせずに即座にトリガされ、遅滞なくループします。？

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     setTimeout(asyncFunction(listing, function(data) { 
      console.log('Done'); 
     }), 5000); 
    } 
}); 

Answer 1

他の関数で関数をラップする必要があります。現在、関数を呼び出して、戻り値を引数としてsetTimeoutに渡します。以下のコードは、（correc tly）関数をsetTimeoutに渡します。 5秒後、関数が実行されます。

スコープの問題のために、私は2つの機能を追加しなければなりませんでした。 5秒後、ループは既に終了しており、変数listingは、最後の要素listingsに等しくなります。

someFunction(listings, function() { 
    var counter = 0; // Define counter for 5 second-delays between each call 
    for (var i in listings) { 
     var listing = listings[i]; 
     (function(listing){ //Closure function 
      setTimeout(function(){ //setTimeout function 
       // Because of the closure, `listing` is unique 
       asyncFunction(listing, function(a, b) { 
        console.log('Done'); 
       }); 
      }, 5000 * ++counter); //Increase counter for each loop 
     })(listing); 
    } 
}); 

Answer 2

これは違いです。重要な点はasyncFunctionですか？あなたはそれを貼り付けることができますか？

var foo=function(){ 
    alert("BAR"); 
    return function(){ 
     alert("I AM!"); 
    }; 
} 
setTimeout(foo(),4000); 
setTimeout(foo,5000); 

Answer 3

は、あなたのasyncFunctionが何を知らない、単にあなたがそれを渡された関数を返すことができると思われます。

someFunction(listings, function() { 
    for (var i = 0; i < listings.length; ++i) { 
     setTimeout(asyncFunction(listings[i], function(data) { 
      console.log('Done'); 
     }), 5000 * i); 
    } 
}); 

function asyncFunction(lstng, func) { 
    return func; 
} 

私はあなたがいくつかの追加ロジックをまとめておく必要があると思います。 setTimeoutに返された新しい機能で必要とされるものは何でも

function asyncFunction(lstng, func) { 
    return function() { 
     // do some stuff with the listing 

     // then invoke the func 
     func(); 
    } 
} 

今すぐあなたのasyncFunctionラップ。新しい関数は、渡されたコールバックも呼び出します。

---

JSFIDDLE DEMO

Answer 4

あなたがPromiseを使用することができますECMAScript6を使用している場合。

だから、約束にsetTimeoutメソッドへの呼び出しをラップ遅延関数を作成：

function delay(ms) { 
    return new Promise(function (resolve) { return setTimeout(resolve, ms); }); 
}; 

そして、あなたがそのようにそれを使用することができます：

someFunction(listings, function() { 
    for (var i in listings) { 
     var listing = listings[i]; 
     delay(5000).then(() => { 
      return asyncFunction(listing); 
     }).then(() => { 
      console.log('Done'); 
     }); 
    } 
}); 

あなたが使用することができますECMAScript 2017を使用している場合aync/await。

非同期関数は約束を返します。したがって、遅延関数のコードを変更する必要はありません。