1

Consider these 2 pieces of code:

const test = async () => {
  const start = new Date().getTime();
  const promise1 = new Promise(_ => setTimeout(_, 1000)); 
  const promise2 = new Promise(_ => setTimeout(_, 4000)); 
  const value1 = await promise1;
  const value2 = await promise2;
  const time = new Date().getTime() - start;
  console.log(`${time} ms passed`)
};

test();
// console shows 4001 ms passed

In the above code, the total time is the highest of both promises.

const test = async () => {
  const start = new Date().getTime();
  const promise1 = await new Promise(_ => setTimeout(_, 1000)); 
  const promise2 = await new Promise(_ => setTimeout(_, 4000)); 
  const time = new Date().getTime() - start;
  console.log(`${time} ms passed`)
};

test();
// console shows 5010 ms passed

In the above code, the total time is the addition of both promises.

Can anyone explain what's happening under the hood step by step?

fjplaurr
  • 1,818
  • 3
  • 19
  • 36
  • 1
    What do you think is happening in each one? Try to debug them and step over each line in both examples. What do you observe? Using your debugger (in the browser or IDE) is a powerful tool that can help you figure out why code behaves the way it does on your own. It will make you become a better developer and get answers to your questions quicker. – Igor Jan 05 '21 at 17:35
  • Remember that the timeout is started in the line `const promise2 = new Promise(_ => setTimeout(_, 4000));`. Not when the promise is `await`ed. Also see the duplicates for why you should never use this approach :-) – Bergi Jan 05 '21 at 17:36
  • Hi Igor. I have done it. In my opinion, creating a promise does not take the time provided. What really takes the time is resolving or rejecting that promise because that is the moment when the function within setTimeOut is executed. But that is my opinion. And I think I am far from the truth. Any clue? – fjplaurr Jan 05 '21 at 17:37
  • Hi Bergi. Thank you. I asked this because I have already read those links. I know Promise.all is a better approach for several reasons written in those links. However, the question is not about which approach is better and why because that is already answered in those links. The question is that I would like to know what's going on here under the hood and I have not found any responses that explain it. – fjplaurr Jan 05 '21 at 17:43
  • As an analogy: Think of code example 1 as a race where 2 conditions are started *at the same time*. Think of code example 2 as a relay race (promise 2 starts only *after* promise 1 completes). Keep that in mind and step through your code again using the debugger. Does it start to make sense now? – Igor Jan 05 '21 at 17:44
  • @fjplaurr Do you understand how promises work in general? Can you translate `await` to the equivalent `.then()` calls? – Bergi Jan 05 '21 at 17:53
  • Thank you Bergi and Igor. I took both advices from you. I did a debugging with then to simplify things. First example: https://codesandbox.io/s/musing-antonelli-n17ot?file=/src/index.js Second example: https://codesandbox.io/s/quizzical-babbage-uv14o?file=/src/index.js I think I understand now what's happening: The timer starts as soon as the new Promise is created. So, in the second example, the problem is that one promise is created in the callback of the other promise. That does not happen in the first example where both promises are made almost simultaneously. – fjplaurr Jan 05 '21 at 18:15

0 Answers0