如何让 Javascript 循环等待现有迭代完成，然后再开始下一个？

Question

How do I make the below loop wait for current iteration to finish before it starts the next iteration?

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

I usually use functions and '.done' to execute code after pre-requisite code has finished. I have also used functions within animations to execute code after the animation has finished.

However I can't get my head around how you make the code to wait for an iteration of a loop to finish. If I put the pre-requisite code into a function (all the code within the loop) and then use.done, there is only the closing brackets of the loop left to put within a '.done' function - which obviously will not work.

Can anyone solve this conundrum?

Answer 1

You can make a while loop in an async function instead and use await. In the code below, the while-loop waits at least 2 seconds at each iteration but at most as long as the task takes.

 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

To bring Matthias's elegant up-voted answer to life in your specific situation:

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

PS Nothing wrong with the "Alert" if what you want to do is prompt the user that kick-off is about to start, but will not start until they acknowledge the alert.

Further to comment about "await is a reserved identifier", the enclosing function needs to be declared as async.

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

   // more code
}

Needs to be:

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

    // more code
}