How do I wait for a promise to finish inside a loop? (without using async-await)

Question

The below code waits only for the 1st iteration of the for loop. If I use async-await, it works fine. So where am I going wrong here?

function wait(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
}

function countDown(count) {
  for (let i = count; i > 0; i--) {
    wait(1000)
      .then(() => console.log(i))
      .catch((error) => console.log(error));
  }
}

countDown(5);

Does this answer your question? [How do I add a delay in a JavaScript loop?](https://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop) — ggorlen, Jul 16 '22 at 19:09
No @ggorlen. I wanted to specifically know how to use it using the then syntax — Tony Mike, Jul 16 '22 at 21:24
Did you read the entire thread? The `.then` approach is in there along with almost every other variant of this common problem: https://stackoverflow.com/a/28274171/6243352. It has 656k views and 461 upvotes, so folks have already put a lot of energy into that thread and there's no need to open another. Part of the reason for the dupe suggestion is to ensure future visitors can get to the best resource for the problem in addition to you. Somewhat incidental, but `async`/`await` is much cleaner IMO than the `.then` approach here. — ggorlen, Jul 16 '22 at 21:28

score 1 · Answer 1 · answered Jul 16 '22 at 16:17

Because the Promise will run the "then" statement when it done its task. And if you use the loop like that, the Promise for i=4 will immediately execute after i=5 executed. This will make the output just only wait for the first one.

The solution for this is run the Promise (i=4) after the Promise (i=5) done using recursive function.

function wait(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds))
}

function countDown(count) {
    if (count === 0) return;
    wait(1000)
        .then(() => {
            console.log(count)
            countDown(count - 1)
        })
        .catch((error) => console.log(error));
}

countDown(5);

This isn't actually recursive. The stack is cleared, the async task runs, then a new call is made. That's a good thing because you could blow the stack if `count` was too large. — ggorlen, Jul 16 '22 at 19:07

Ryan Pattillo · Answer 2 · 2022-07-16T16:42:54.433

Execution doesn't stop when you call then on a Promise like it does when you use await. On the first loop a Promise is created whose then method will execute in one second, but the function continues looping because execution hasn't stopped. At the end of the loop you have five Promise objects that have all been created consecutively with no pauses in between, so their one-second timeouts all execute very close to one another.

Here's the await method with a comment calling out where execution stops.

function wait(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

async function countDown(count) {
    for (let i = count; i > 0; i--) {
        await wait(1000); // Execution stops here for one second before continuing
        console.log(i);
    }
}

countDown(5);

Here's something closer to Phúc Đỗ Vương's answer with a comment calling out where execution doesn't stop.

function wait(milliseconds) {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}

function countDown(count) {
    if (count === 0) {
        return;
    }
    
    wait(1000).then(() => {
        // This code, including the next call to countDown, will execute in one second
        console.log(count);
        countDown(count - 1);
    });

    // The current call to countDown finishes before the next call begins
}

countDown(5);

How do I wait for a promise to finish inside a loop? (without using async-await)

2 Answers2