Looping through an array of promises in javascript

Question

I have some code that loops through an array of promises, and outputs the value.

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const promises = [
  wait(1),
  wait(3),
  wait(2),
  wait(4),
  wait(5),
];

for (var promise of promises) {
  promise.then(seconds => console.log(`waited ${seconds} seconds`));
}

The issue with this is that the promise results don't get logged in the order of the array. My expected result is this:

Waited 1 seconds
Waited 3 seconds
Waited 2 seconds
Waited 4 seconds
Waited 5 seconds

And the result was this:

Waited 1 seconds
Waited 2 seconds
Waited 3 seconds
Waited 4 seconds
Waited 5 seconds

So I would like to have something like this

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const promises = [
  wait(1),
  wait(3),
  wait(2),
  wait(4),
  wait(5),
];

for (var promise of promises) {
  // When the promise is resolved, log `Waited ${seconds} seconds`
}

How would I do this?

You should do Promise.all to get them in order

Daniel A. White
– Daniel A. White

2022-07-05 21:52:41 +00:00
Commented Jul 5, 2022 at 21:52 — Daniel A. White
– Daniel A. White, Commented Jul 5, 2022 at 21:52

trincot · Accepted Answer · 2022-07-05 22:08:55Z

3

If you don't want the timers to start all at once, you shouldn't make all those wait calls at once. Instead only make the next call when the previous one's resulting promise has resolved:

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const tasks = [
  () => wait(1),
  () => wait(3),
  () => wait(2),
  () => wait(4),
  () => wait(5),
];

(async function () {
  for (const task of tasks) {
    const seconds = await task();
    console.log(`waited ${seconds} seconds more`);
  }
})();

If you do want all promises to start at the same time, and want to wait for all of them to resolve before starting to output the results, then use Promise.all:

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const promises = [
  wait(1),
  wait(3),
  wait(2),
  wait(4),
  wait(5),
];

Promise.all(promises).then(values => {
  console.log("all results are in:");
  for (const seconds of values) {
    console.log(`waited ${seconds} seconds (from the start)`);
  }
});

If you do want all promises to start at the same time, and want to wait for them to resolve only after the previous one resolved, then use await:

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const promises = [
  wait(1),
  wait(3),
  wait(2),
  wait(4),
  wait(5),
];

(async function () {
  for (const promise of promises) {
    const seconds = await promise;
    console.log(`waited ${seconds} seconds (from the start)`);
  }
})();

edited Jul 5, 2022 at 22:08

answered Jul 5, 2022 at 21:55

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

pilchard Over a year ago

@user18807217 the same pattern applies even if you make all your wait calls in the array. Just replace const seconds = await task(); with const seconds = await task;

c136 Over a year ago

The timers start all at once sadly, and it should be when the 3 second timer is resolved, the 2 second timer has already been resolved, therefore, the 2 seconds complete message happens right after the 3 seconds complete message

pilchard Over a year ago

It will be if you use your original array and make the change I indicated. jsfiddle

trincot Over a year ago

Added some more alternatives.

c136 Over a year ago

@trincot best answer here

pilchard · Accepted Answer · 2022-07-05 21:59:30Z

1

Daniel A. White is right - use Promise.all() - something like this:

function wait(seconds) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(seconds);
    }, seconds * 1000);
  });
}

const promises = [wait(1), wait(3), wait(2), wait(4), wait(5)];

Promise.all(promises).then((results) => {
  for (var seconds of results) {
    console.log(`waited ${seconds} seconds`);
  }
});

edited Jul 5, 2022 at 21:59

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

answered Jul 5, 2022 at 21:56

Richard Wheeldon

1,14717 silver badges30 bronze badges

2 Comments

pilchard Over a year ago

keep in mind this waits for all the promises to resolve before the .then

c136 Over a year ago

The issue with promise.All is that it wait's for all the promises to be resolved not logging to the console in the order of the array one by one.

Collectives™ on Stack Overflow

Looping through an array of promises in javascript

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related