如何在For循環中使用帶有超時的Promise？

Question

我很少有應循環並延遲執行的功能。 這是我的代碼：

function func1() {
  for (var i = 0; i < 3; i++) {
    func2().then(); // await in loop until func2() completed       
  }
}

function func2() {
  return new Promise(succes) {
    for (var i = 0; i < 10; i++) {
      function3().then(); //wait untill function3 and then continue looping
    }
    success();
  }
}

function function3() {
  return new Promise(function(ready) {
    setTimeout(function() {
      // do some stuff
      ready();
    }, 2000);
  });
}

但這是行不通的。 我應該改變什么？

Answer 1

我認為您打算使用的是ES8（ES2017） async / await構造：

 async function func1() { for (var i = 0; i < 3; i++) { console.log(`func1 waiting for func2 #${i + 1}`); await func2(); // await in loop until func2() completed console.log(`Finished iteration ${i} for func1`); } } async function func2() { console.log('Started func2'); for (var i = 0; i < 10; i++) { console.log(`func2 waiting for func3 #${i + 1}`); await function3(); //wait untill function3 and then continue looping } } function function3() { return new Promise(resolve => setTimeout(resolve, 1000)); } func1().then(() => console.log('finished')); 

要獲得更廣泛的瀏覽器支持，可以使用Babel

。

Answer 2

我不知道這是最好的解決方案，但這是某種方式，我認為這很容易實現。

 function func1(i){ i++; return new Promise(function(ready){ setTimeout(function(){ func2(i); ready(i); }, 1000); }); } function func2(i = 0){ if(i < 10){ func1(i).then((test) => { console.log(test); }) } else { return false; } } func2(); 

Answer 3

您可以使用jQuery的.each() ，它是同步的，因此下一個循環要等到上一個結束才觸發。 您也可以添加回調，但是這里並不需要它們。