Waiting on Promises - In Order!

by Mark Voorberg

HTML

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>

JavaScript

const resolveInTwoSeconds = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(2), 2000);
  })
};

const resolveInThreeSeconds = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(3), 3000);
  })
};

const resolveInFiveSeconds = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(5), 5000);
  })
};

(async function() {
  const asyncFunctions = [resolveInTwoSeconds, resolveInThreeSeconds, resolveInFiveSeconds];

  console.log("Running sequential Promises in a reducer...");
  // outputs 2 after 2 seconds
  // outputs 3 after 5 seconds
  // outputs 5 after 8 seconds
  await asyncFunctions.reduce(async (previousPromise, nextAsyncFunction) => {
    await previousPromise;
    const result = await nextAsyncFunction();
    console.log(result);
  }, Promise.resolve());
  
  console.log("Running sequential Promises in a for-loop...");
  // outputs 2 after 2 seconds
  // outputs 3 after 5 seconds
  // outputs 5 after 8 seconds
  for (var i = 0; i < asyncFunctions.length; i++) {
    var result = await asyncFunctions[i]();
    console.log(result);
  }
  
})();