JavaScript ES6 promise for loop

es6-promise, javascript

Solution

As you already hinted in your question, your code creates all promises synchronously. Instead they should only be created at the time the preceding one resolves.

Secondly, each promise that is created with `new Promise` needs to be resolved with a call to `resolve` (or `reject`). This should be done when the timer expires. That will trigger any `then` callback you would have on that promise. And such a `then` callback (or `await`) is a necessity in order to implement the chain.

With those ingredients, there are several ways to perform this asynchronous chaining:

With a `for` loop that starts with an immediately resolving promise

With `Array#reduce` that starts with an immediately resolving promise

With a function that passes itself as resolution callback

With ECMAScript2017's `async` / `await` syntax

With ECMAScript2020's `for await...of` syntax

But let me first introduce a very useful, generic function.

Promisfying `setTimeout`

Using `setTimeout` is fine, but we actually need a promise that resolves when the timer expires. So let's create such a function: this is called promisifying a function, in this case we will promisify `setTimeout`. It will improve the readability of the code, and can be used for all of the above options:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

See a snippet and comments for each of the options below.

1. With `for`

You can use a `for` loop, but you must make sure it doesn't create all promises synchronously. Instead you create an initial immediately resolving promise, and then chain new promises as the previous ones resolve:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

for (let i = 0, p = Promise.resolve(); i < 10; i++) {
    p = p.then(() => delay(Math.random() * 1000))
         .then(() => console.log(i));
}

So this code creates one long chain of `then` calls. The variable `p` only serves to not lose track of that chain, and allow a next iteration of the loop to continue on the same chain. The callbacks will start executing after the synchronous loop has completed.

It is important that the `then`-callback returns the promise that `delay()` creates: this will ensure the asynchronous chaining.

2. With `reduce`

This is just a more functional approach to the previous strategy. You create an array with the same length as the chain you want to execute, and start out with an immediately resolving promise:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

[...Array(10)].reduce( (p, _, i) => 
    p.then(() => delay(Math.random() * 1000))
     .then(() => console.log(i))
, Promise.resolve() );

This is probably more useful when you actually have an array with data to be used in the promises.

3. With a function passing itself as resolution-callback

Here we create a function and call it immediately. It creates the first promise synchronously. When it resolves, the function is called again:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

(function loop(i) {
    if (i >= 10) return; // all done
    delay(Math.random() * 1000).then(() => {
        console.log(i);
        loop(i+1);
    });
})(0);

This creates a function named `loop`, and at the very end of the code you can see it gets called immediately with argument 0. This is the counter, and the i argument. The function will create a new promise if that counter is still below 10, otherwise the chaining stops.

When `delay()` resolves, it will trigger the `then` callback which will call the function again.

4. With `async`/`await`

Modern JS engines support this syntax:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

(async function loop() {
    for (let i = 0; i < 10; i++) {
        await delay(Math.random() * 1000);
        console.log(i);
    }
})();

It may look strange, as it seems like the promises are created synchronously, but in reality the `async` function returns when it executes the first `await`. Every time an awaited promise resolves, the function's running context is restored, and proceeds after the `await`, until it encounters the next one, and so it continues until the loop finishes.

5. With `for await...of`

With EcmaScript 2020, the `for await...of` found its way to modern JavaScript engines. Although it does not really reduce code in this case, it allows to isolate the definition of the random interval chain from the actual iteration of it:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

async function * randomDelays(count, max) {
    for (let i = 0; i < count; i++) yield delay(Math.random() * max).then(() => i);
}

(async function loop() {
    for await (let i of randomDelays(10, 1000)) console.log(i);
})();

Problem

Original source

Related problems

• What is the explicit promise construction antipattern and how do I avoid it?
• Resolve promises one after another (i.e. in sequence)?
• Creating a (ES6) promise without starting to resolve it
• What is the (function() { } )() construct in JavaScript?