How does setTimeout(foo,0) Work, And what problem does it solve !?

(Originally published on Medium.com on Apr 26, 2020)

ALoha;

Hi there, so today I am going to talk about How does setTimeout(foo,0) Work, And what problem does it solve !?

Some of us already know that setTimeout(foo, 0) schedules the foo() function to run as the last function in the queue. But why does it work that way?

To understand this, we first need to explore how JavaScript handles function execution.

---

How Does JavaScript Handle Functions?

JavaScript is a single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece of code before moving to the next.

The first key piece of information to understand is that JavaScript can execute only one call at a time. We can think of each call as a “message,” which contains multiple “frames” (smaller units of execution).

Imagine JavaScript as someone reading and processing messages. The sequence might look like this:

Message 1 >> Frame 1 > Frame 2 > Frame 3 > Frame 4 > Frame 5 > Frame 6 >>Delete Message 1 > Message 2 >> Frame 1 > … > Frame 6 >> Delete Message 2 > and so on …

So JavaScript processes one message at a time, going frame by frame. Once it finishes all the frames in a message, it deletes that message and moves to the next one.

---

What Problem Does This Cause?

This sequence creates issues when multiple messages or frames are given to JavaScript simultaneously.. So, If we ask JavaScript to handle these messages at once, only one will execute. What will happen to the other messages!?. It will be ignored!

In the programming world, this is called a Race condition, which literally means that two or more functions are racing towards being executed. only one of them will win and the other will be totally ignored .. this concepts were being used in some machines to get some random response.

This may cause our whole application to not work correctly as expected.

---

How Does setTimeout(foo, 0) Solve This Problem?

Using setTimeout(foo,0) or setTimeout(foo) will by default set our foo function to run as the last message in the queue.

so if you, for instance, set the timer for 10 seconds setTimeout(foo,10000) this will be executed as the following :

1. The foo() function is moved to the end of the queue.
2. JavaScript executes all other queued functions on the page first.
3. After processing those functions, it waits for 10 seconds before executing foo().

Which means that our foo() function will not be executed exactly after 10 seconds after the page loads BUT it will probably be more than 10 seconds ( 10 seconds + the time needed to finish processing other functions in the queue).

So, When we use setTimeout(foo, 0) without any delay, we’re essentially asking JavaScript to:

• Skip executing the foo() function immediately.
• Move foo() to the end of the queue, ensuring all other functions execute first.

---

Conclusion

We use setTimeout(foo, 0) often to make sure that our function foo() runs after all other functions in the queue. This prevents race conditions and ensures our app runs as expected.

Thank you for reading this far!

References:

• Concurrency model and the event loop.
• Race Condition.
• Single Threaded JavaScript.