如何在 for 循环中使用带有超时的承诺？答案

【问题标题】：How to use promises with timeouts in a for loop?如何在 for 循环中使用带有超时的承诺？
【发布时间】：2017-05-28 23:00:24
【问题描述】：

我有几个函数应该在循环和延迟中一一执行。这是我的代码：

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

但它不起作用。我应该改变什么？

【问题讨论】：

查看同步和异步操作的区别。 stackoverflow.com/questions/16336367/…
承诺不同步
我认为 then() 与.net await 运算符类似。但它不是
另外.then() 用于将回调附加到promise。在没有参数的情况下单独使用.then() 只会再次返回相同的承诺。见：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery promise ecmascript-6 es6-promise

【解决方案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

【讨论】：

是的，这就是我真正想要的。我如何确定此代码 100% 将在用户端执行？我的意思是，并非所有浏览器都支持 EC7。
部署时可以使用Babel将代码转译成ES5
async/await 不是 ES7 (ES2016) 的一部分。它将成为今年发布的 ES2017 的一部分。
@FelixKling 你是对的，我忘记了 ES7 是指数运算符的一个小版本，我认为是 includes 方法之一。更正了我的答案。

【解决方案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();

【讨论】：

【解决方案3】：

您可以使用 jQuery 的 .each() ，它是同步的，因此下一个循环在前一个结束之前不会触发。您也可以添加回调，但这里并不需要它们。

【讨论】：

func2().then(); 将创建一个新的 Promise，然后进入下一个循环迭代。 .each 只是在后台使用 for。