如何让 Javascript 循环在开始下一个迭代之前等待现有迭代完成？

Question

如何让下面的循环在开始下一次迭代之前等待当前迭代完成？

var minute = 0

alert ("Kick Off");

var refreshIntervalId = setInterval(function() {     
  if (minute < 91) {
    // lots of code with Ajax calls
    // can take from a fraction of a second to 30 seconds to run code
    // depending on conditions
  } else {
    clearInterval(refreshIntervalId);
  } 
  minute++         
}, 1000);

我通常在先决条件代码完成后使用函数和“.done”来执行代码。我还使用动画中的函数在动画完成后执行代码。

但是，我无法理解如何让代码等待循环迭代完成。如果我将先决条件代码放入一个函数（循环中的所有代码）然后使用 .done，则只有循环的右括号可以放在“.done”函数中 - 这显然不起作用.

谁能解决这个难题？

Answer 1

您可以在异步函数中创建一个 while 循环并使用 await。在下面的代码中，while 循环在每次迭代时至少等待 2 秒，但最多等待任务所需的时间。

const sleep = time => new Promise(resolve => setTimeout(resolve, time))  

async function main() {
  while (true) {
    console.log("new iteration")
    const task = new Promise((resolve, reject) => {
      // things that take long go here…
      const duration = Math.random()*4000
      setTimeout(() => {
        console.log(`done, task took ${Math.round(duration)}ms`)
        resolve()
      }, duration)
    })
    // wait until task is finished but at least 2 seconds
    await Promise.all([task, sleep(2000)])
  }
}

main()

Answer 2

在您的具体情况下，将 Matthias 优雅的投票答案带入生活：

var minute = 0
// reusable function to wait the specified amount of time (1000ms in your case)
const sleep = time => new Promise(resolve => setTimeout(resolve, time))  

alert ("Kick Off");

while (minute < 91)
{
    const processThisMinuteTask = new Promise((res, rej) => {
        // lots of code with Ajax calls
        // can take from a fraction of a second to 30 seconds to run code
        // depending on conditions
        // NOTE: use AWAIT for all Ajax calls
        res();
    });
    // will wait for both:
    // a) your processThisMinuteTask to finsih
    // b) 1000ms to pass
    // So, will mean that this iteration will wait for whichever of those is longest
    await Promise.all([processThisMinuteTask, sleep(1000)]);
    minute++;
}

附：如果您想要做的是提示用户开球即将开始，但在他们确认警报之前不会开始，那么“警报”没有任何问题。

进一步评论“await 是一个保留标识符”，需要将封闭函数声明为 async。

function playMatch() {
   // will fail
   await myOtherFunction();

   // more code
}

需要：

async function playMatch() {
    // will now wait for myOtherFunction to finish before continuing.
    await myOtherFunction();

    // more code
}