Using multiple setTimeout in the same async function / Timer reset

Question

When trying to understand async/await, I tried this block of code that didn't behave the way I expected it to.

let test = async function () {
  let result = new Promise((resolve, reject) => {
    setTimeout(() => resolve('done1'), 2000)
  })

  let result2 = new Promise((resolve, reject) => {

    setTimeout(() => resolve('done2'), 2500)
  })

  let x1 = await result
  console.log(x1)


  let x2 = await result2
  console.log(x2)

}

test()

I was expecting the console to display done1 after 2seconds, then display done2 2.5 seconds after done1. Instead, It displayed done1 in 2seconds and done2 0.5seconds after that. Why does it behave like this, since I await the second setTimeout after displaying the first one?

Creating a promise = starting. You need to `await` before the promise gets created — Jonas Wilms, Dec 11 '17 at 11:28
@JonasW. …await the *first* promise before the *second* promise gets … — Bergi, Dec 11 '17 at 11:30

score 1 · Accepted Answer · edited Dec 11 '17 at 11:31

When you create a new Promise, it starts to run it's code. When you have setTimeout inside it, actually the timer is going. When you use await before the Promise call, it waits until the promise will be resolved or rejected and then work.

You need to create each promise and after that wait for it.

let test = async function () {

  let result = new Promise((resolve, reject) => {
    setTimeout(() => resolve('done1'), 2000);
  });
  
  let x1 = await result;
  console.log(x1);

  let result2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve('done2'), 2500);
  });

  let x2 = await result2;
  console.log(x2);

}

test()

Using multiple setTimeout in the same async function / Timer reset

1 Answers1

Linked