Unusual results observed with the Promise.all method

Question

Unusual results observed with the Promise.all method

There's a code snippet I'm working on where I need to await 5 promises, wait for 2 seconds, and then continue with another set of 5 promises. However, it seems like the two instances of Promise.all are not being awaited as expected. I wonder if I have misunderstood the concept of Promise.all or if there is something missing in my code.

(function () {
    let val = 0

    const promiseArr = []
    for (let i = 0; i < 10; i++) {
        promiseArr[i] = new Promise((res) => {
            val += 500
            setTimeout((val2) => {
                console.log(val2)
                res()
            }, val, val)
        })
    }

    console.log();
    (async function() {
        await Promise.all(promiseArr.slice(0, 5))
        console.log('start await')
        await new Promise((res) => setTimeout(res, 2000))
        console.log('done await')
        await Promise.all(promiseArr.slice(6, 10))
    })()
}) ()

Expected output:

500
...
2500
start await
done await
3000
...
5000

Actual output:

500
1000
1500
2000
2500
start await
3000
3500
4000
4500
done await
5000

EDIT: After some more investigation, I realize why it behaves this way. It seems like I had a misunderstanding about an important concept involving Promises. Thanks for all the help provided!

javascript promise async-await

Answer 1

Answer №1

If you're wondering why this message is displayed, it's because promises start executing as soon as they are created (or at the end of the current synchronous block), not when they are awaited.

To gain clarity, try organizing your code to log timestamps for each event:

const t0 = +new Date();

const logWithTime = (message = "") =>
  console.log("" + Math.round(+new Date() - t0) + ": " + message);

(async function() {
  let val = 0;

  const resolver = res => {
    val += 500;
    const thisVal = val; 
    logWithTime("Creating timeout for " + thisVal);
    setTimeout(
      arg => {
        logWithTime("Timeout for " + thisVal);
        res();
      },
      thisVal,
      thisVal,
    );
  };

  const promiseArr = [];
  for (let i = 0; i < 10; i++) {
    promiseArr[i] = new Promise(resolver);
  }

  logWithTime("awaiting for first 5...");
  await Promise.all(promiseArr.slice(0, 5));
  logWithTime("waiting for 2 seconds...");
  await new Promise(res => setTimeout(res, 2000));
  logWithTime("waiting for the rest...");
  await Promise.all(promiseArr.slice(6, 10));
  logWithTime("all done");
})();

This will output:

0: Creating timeout for 500
10: Creating timeout for 1000
10: Creating timeout for 1500
10: Creating timeout for 2000
10: Creating timeout for 2500
10: Creating timeout for 3000
10: Creating timeout for 3500
10: Creating timeout for 4000
10: Creating timeout for 4500
10: Creating timeout for 5000
10: awaiting for first 5...
511: Timeout for 500
1011: Timeout for 1000
1515: Timeout for 1500
2013: Timeout for 2000
2510: Timeout for 2500
2511: waiting for 2 seconds...
3010: Timeout for 3000
3512: Timeout for 3500
4011: Timeout for 4000
4511: Timeout for 4500
4511: waiting for the rest...
5011: Timeout for 5000
5011: all done

The order in which the timeouts are resolved can be observed clearly through these logs.

Answer 2

If you're wondering why this message is displayed, it's because promises start executing as soon as they are created (or at the end of the current synchronous block), not when they are awaited.

To gain clarity, try organizing your code to log timestamps for each event:

const t0 = +new Date();

const logWithTime = (message = "") =>
  console.log("" + Math.round(+new Date() - t0) + ": " + message);

(async function() {
  let val = 0;

  const resolver = res => {
    val += 500;
    const thisVal = val; 
    logWithTime("Creating timeout for " + thisVal);
    setTimeout(
      arg => {
        logWithTime("Timeout for " + thisVal);
        res();
      },
      thisVal,
      thisVal,
    );
  };

  const promiseArr = [];
  for (let i = 0; i < 10; i++) {
    promiseArr[i] = new Promise(resolver);
  }

  logWithTime("awaiting for first 5...");
  await Promise.all(promiseArr.slice(0, 5));
  logWithTime("waiting for 2 seconds...");
  await new Promise(res => setTimeout(res, 2000));
  logWithTime("waiting for the rest...");
  await Promise.all(promiseArr.slice(6, 10));
  logWithTime("all done");
})();

This will output:

0: Creating timeout for 500
10: Creating timeout for 1000
10: Creating timeout for 1500
10: Creating timeout for 2000
10: Creating timeout for 2500
10: Creating timeout for 3000
10: Creating timeout for 3500
10: Creating timeout for 4000
10: Creating timeout for 4500
10: Creating timeout for 5000
10: awaiting for first 5...
511: Timeout for 500
1011: Timeout for 1000
1515: Timeout for 1500
2013: Timeout for 2000
2510: Timeout for 2500
2511: waiting for 2 seconds...
3010: Timeout for 3000
3512: Timeout for 3500
4011: Timeout for 4000
4511: Timeout for 4500
4511: waiting for the rest...
5011: Timeout for 5000
5011: all done

The order in which the timeouts are resolved can be observed clearly through these logs.

Answer 3

Answer №2

The countdown begins as soon as you execute the setTimeout function, not when you wait for the promise it returns to be resolved.

When the code

(res) => setTimeout(res, 2000)

is triggered, there are already 4 other pending setTimeouts that will complete and trigger the console.log before this one resolves.

Answer 4

The countdown begins as soon as you execute the setTimeout function, not when you wait for the promise it returns to be resolved.

When the code

(res) => setTimeout(res, 2000)

is triggered, there are already 4 other pending setTimeouts that will complete and trigger the console.log before this one resolves.

Answer 5

Answer №3

It became apparent to me that I was also mistaken about this: when you create a Promise, its function is immediately executed. To achieve what you intended, you should create an array of functions and call them as required.

(function () {
    let value = 0

    const promiseArray = []
    for (let i = 0; i < 10; i++) {
        promiseArray[i] = () => new Promise((resolve) => {
            value += 500
            setTimeout((newValue) => {
                console.log(newValue)
                resolve()
            }, value, value)
        })
    }

    console.log();
    (async function() {
        await Promise.all(promiseArray.slice(0, 5).map((func) => func()))
        console.log('beginning await')
        await new Promise((resolve) => setTimeout(resolve, 2000))
        console.log('await finished')
        await Promise.all(promiseArray.slice(6, 10).map((func) => func()))
    })()
}) ()

Answer 6

It became apparent to me that I was also mistaken about this: when you create a Promise, its function is immediately executed. To achieve what you intended, you should create an array of functions and call them as required.

(function () {
    let value = 0

    const promiseArray = []
    for (let i = 0; i < 10; i++) {
        promiseArray[i] = () => new Promise((resolve) => {
            value += 500
            setTimeout((newValue) => {
                console.log(newValue)
                resolve()
            }, value, value)
        })
    }

    console.log();
    (async function() {
        await Promise.all(promiseArray.slice(0, 5).map((func) => func()))
        console.log('beginning await')
        await new Promise((resolve) => setTimeout(resolve, 2000))
        console.log('await finished')
        await Promise.all(promiseArray.slice(6, 10).map((func) => func()))
    })()
}) ()

Unusual results observed with the Promise.all method

Answer №1

Answer №2

Answer №3

Similar questions

Managing extensive geographical information through HTTP

Having trouble fetching configuration values with Vue.js

What is the procedure for obtaining a list of items with the second item marked as "true"?

Utilize Google Place Autocomplete to restrict input to only addresses recommended by autocomplete suggestions

Create a file object using content with the help of JavaScript

Store the data from the form into the database according to the radio button choice

The three.js animation fails to load on Github Pages

Learn the process of sending both Header and Body data in a POST request using Axios with Vue.js

The automatic opening of a modal in a Livewire component is not functioning as expected

unable to retrieve controls generated from AJAX response

Tips on coding javascript within an MVC4 C# environment

extract the information from a specific div on a different website using JavaScript

Monitor the number of clicks (conversions) on Google Adwords

What steps can I take to ensure my dashboard table is dynamic, updates in real-time, and automatically reflects changes made in my MySQL database

What could be causing issues with my JavaScript AJAX?

Converting a comma-separated string into an array of integers using jQuery

Continue running the remaining part of the function once the asynchronous function has completed its execution

Issue with React application and nginx configuration causing components not to switch when using router functionality

Issue with Material-UI tab not showing the component upon page load

What is the best way to cut strings in JavaScript or jQuery?