JavaScript setTimeout and Event Loop Explained
- What is setTimeout
- Why setTimeout has trust issues
- What is Event Loop
- What is Callback Queue
- What is Call Stack
- Important Interview Questions
What is setTimeout?
setTimeout is a JavaScript function used to run some code after a delay.
The delay is given in milliseconds.
1000 milliseconds = 1 second
setTimeout(() => {
console.log("Hello");
}, 2000);
Output
Hello
Here JavaScript waits for 2 seconds and then prints "Hello".
The timer value is not exact execution time.
It is only the minimum waiting time.
Why setTimeout Has Trust Issues?
Many developers think setTimeout executes exactly after the given time.
But that is not true.
If JavaScript is busy running other code, the timer must wait.
setTimeout delay means minimum delay, not guaranteed delay.
Simple setTimeout Flow
console.log("Start");
setTimeout(() => {
console.log("Timer Finished");
}, 2000);
console.log("End");
Output
Start
End
Timer Finished
JavaScript does not stop and wait for the timer.
It immediately executes the next line.
That is why "End" prints before "Timer Finished".
What is Call Stack?
Call Stack is the place where JavaScript executes code.
JavaScript can execute only one task at a time.
| Concept | Meaning |
|---|---|
| Call Stack | Runs JavaScript code |
| Single Thread | One task at one time |
Call Stack = JavaScript Working Area
What is Callback Queue?
When timer completes, the callback function goes into Callback Queue.
It waits there until JavaScript becomes free.
What is Event Loop?
Event Loop continuously checks two things:
- Is Call Stack empty?
- Is Callback Queue having callbacks?
If stack is empty, Event Loop moves callback into Call Stack.
Event Loop works like traffic police.
It manages callback execution.
Blocking Code Example
setTimeout(() => {
console.log("Timer Finished");
}, 2000);
while(true) {
}
Output
No Output
The infinite loop blocks JavaScript completely.
Because of that, timer callback never executes.
Heavy loops block JavaScript execution and freeze the browser UI.
setTimeout with 0 Milliseconds
console.log("Start");
setTimeout(() => {
console.log("Timer");
}, 0);
console.log("End");
Output
Start
End
Timer
Even though timer is 0 milliseconds, JavaScript still executes synchronous code first.
The callback waits until Call Stack becomes empty.
Real Flow of setTimeout
| Step | What Happens |
|---|---|
| 1 | setTimeout goes to Web API |
| 2 | Timer starts in browser |
| 3 | Timer completes |
| 4 | Callback enters Callback Queue |
| 5 | Event Loop checks Call Stack |
| 6 | Callback moves into Call Stack |
| 7 | Callback executes |
Most Asked Interview Questions
1. What is setTimeout?
Used to execute code after delay.
2. Is setTimeout exact timing?
No. It provides minimum delay only.
3. What is Event Loop?
Moves callback from queue to Call Stack.
4. What is Callback Queue?
Stores completed async callbacks.
5. Why JavaScript is asynchronous?
Because browser provides Web APIs and Event Loop.
6. What happens in setTimeout(cb, 0)?
Callback waits until stack becomes empty.
Quick Revision Table
| Concept | Simple Meaning |
|---|---|
| setTimeout | Runs code later |
| Call Stack | Executes code |
| Callback Queue | Stores waiting callbacks |
| Event Loop | Moves callback to stack |
| Web API | Browser feature handling async tasks |
Conclusion
setTimeout is one of the most important JavaScript concepts.
Understanding Call Stack, Callback Queue, and Event Loop helps you understand asynchronous JavaScript clearly.
These concepts are very important for interviews and real-world frontend development.