Execution of Code: setTimeout and Promises

I want to illustrate the concepts with the help of simple examples, so I will explain in detail what happens when we call setTimeout and, next, I will go through a rather similar scenario using Promises.

Example: setTimeout

Let’s examine this case, with a simple daily-life scenario. In my routine, when I wake up in the morning, the second thing I need after kissing my daughter is a cup of coffee.

So, the plan is drinking coffee, right?

I turn on the coffee machine and press Espresso. To make this example simpler, let’s assume that it is guaranteed that the coffee machine always takes the same exact amount of time to make the coffee and that is only 60000ms (1 minute).

So, we “ask” the coffee machine to start preparing it for us. Note that I am not the one doing this, but an external mechanism is doing it for me. In the meantime, I can do other things, like writing a text to a friend.

When the machine finishes preparing our coffee, it tells us that is ready. We don’t need to start drinking it immediately, meaning that we can finish whatever we are doing at the moment and leave the act of drinking the coffee to a later moment.

Actions like “having the intention of drinking coffee”, “push the button on the machine to start preparing coffee” and “writing a text to a friend” are things that happen in the first half of the program.

To be precise, the proper act of "drinking coffee" is something that is deferred and happens at some point later in the future, in the second half of the program.

Let’s put it into code:

Simple code of drinking coffee

Step-by-step timeline

To make things simpler, let’s assume that each instruction takes 1ms to execute, so we can see how they happen, millisecond-by-millisecond.

Follow the slides that will take you to every step in the execution.

Asynchronous execution of setTimeout

But, what happens with Promises?

In JavaScript, a Promise object represents a placeholder for future data.

For example, when we call the fetch function to make a request to the server, there are two things that happen at that moment:

A Promise object is created. The fetch command requests a web API that lives in the browser to solve something for it.

When a Promise object is created, the code is executed with the help of the web APIs in the browser.

The .then() method attaches the callbacks we want to be called after the value property is set. These methods are registered internally. Once the promises have value set, it calls all the registered methods.

Example: Promise

Let’s go back to our daily-life routine again, to make an analogy. I am having coffee again but, this time, I am getting it in a coffee shop. I order a “latte macchiato” from the person at the counter. This person gives me a ticket with a number as a promise that, in the future, I will get the coffee.

I have the intention of “drinking a latte macchiato” when I get the coffee. This is a deferred action that will happen in the future.

There are several orders before mine, so I will have to wait until it's ready. Later, at some point, the waiter will bring it to my table. In the meantime, I can do other things, so I decided to continue with my Medium article.

“Asking for the coffee”, “getting the ticket” and “writing my article” happens in the first part of the program.

In the future, when the coffee is ready, the waiter brings me the latte macchiato. But, I still need to finish writing my last paragraph and only then I can proceed with drinking my coffee.

The act of “drinking latte macchiato” happens in the second part of the program, only when I have the coffee ready.

Let’s put it into code:

Step-by-step timeline

To make things simpler, let’s assume each instruction takes 1ms to execute, so we can see how they happen millisecond-by-millisecond.

Follow the slides that will take you to every step in the execution.