2017-02-10 15 views
1

私はループせずにdelay機能を使用する場合、それは正常に動作Promise.then方法で約束事がループ内で違うのはなぜですか?

function delay(msec) { 
    return (value) => { 
     return new Promise((resolve, reject) => { 
      setTimeout(() => { 
       resolve(value); 
      }, msec); 
     }); 
    } 
} 

を使用するようにdelayファンクション・ジェネレータを持っています。

var promise = Promise.resolve(); 
promise 
    .then(() => console.log(1)) 
    .then(delay(1000)) 
    .then(() => console.log(2)) 
    .then(delay(1000)) 
    .then(() => console.log(3)) 
    .then(delay(1000)); 

しかし、私はループ内でそれを使用する場合、すべての数字をせずに印刷されています任意の遅延:

var loopPromise = Promise.resolve(); 
for (let i = 1; i <= 3; i++) { 
    loopPromise 
     .then(() => console.log(i)) 
     .then(delay(1000)); 
} 

なぜ約束がループで異なるのですか?どのように私はこのループの動作を修正することができますか?

+0

は「その後」おおよそ構築定期的に、同期動作をシミュレートします。あなたのループは継続し、それぞれのタイマーは独立して起動します。ここでは、 'then'は本質的に発射同期を行います。 –

答えて

4

なぜ約束がループで異なるのですか?

我々はループバージョンをアンロールした場合、あなたはこれをやっている:

var loopPromise = Promise.resolve(); 

loopPromise 
    .then(() => console.log(1)) 
    .then(delay(1000)); 

loopPromise 
    .then(() => console.log(2)) 
    .then(delay(1000)); 

loopPromise 
    .then(() => console.log(3)) 
    .then(delay(1000)); 

IEのコールのそれぞれがストレートloopPromiseに起こっていると、むしろチェーンされているよりも、すぐに呼び出されています。

このループ動作をどのように修正できますか?

最も簡単な方法は、あなたの元Promise変数を上書きすることで、各反復におけるチェーンの最新一部のトラックを維持することです:

var loopPromise = Promise.resolve(); 
for (let i = 1; i <= 3; i++) { 
    loopPromise = loopPromise 
     .then(() => console.log(i)) 
     .then(delay(1000)); 
} 
関連する問題