But how is it possible? The event loop makes it possible!
Lets meet the heros of our story
The call stack is a place in memory that keeps track of the function executing at that time, and the functions that are going to be executed after that. Each function is placed on top of the previous function. The first function added, is going to be executed last (First in, last out).
The message queue is a list of messages, waiting to be executed by their associated functions. A new message is added to the list, each time an event, that has been watched by an event listener, occures.
The event loop is a process that keeps running and checks whether the call stack is empty or not. If the call stack is empty, it pushes the first item of the message queue into the call stack for execution.
Here's the browser environment
Lets take a look at the following code and see what happens
foo function, the result is
> One > Three > Two
Now, lets see our heros trying to execute the above code
First, the browser sends the
foo() function call to the call stack.
console.log("One") statement gets pushed on top of the previous frame.
In the meanwhile, the event loop checks to see if the call stack is empty
The JS runtime executes the top frame and removes it from the call stack.
Continuing the execution, the browser sends the
setTimeout() statement to the stack
The event loop checks again
The environment sets up a timer that is going to trigger the callback inside the
and the next statement is pushed into the call stack
Here's the event loop again
The event loop did not find an empty stack so it does nothing again. The execution continues with the next, and final, statement of the
Lets get back to the web API, which set up a timer for a callback function. Now that the timer has ended, the browser sends the callback message to the message queue
After the last statement got executed, it is removed from the stack, and, as soon as there is nothing else inside the
foo() function declaration, the oldest
foo() frame is removed from the call stack too!
Now, the event loop may be more lucky
The event loop checks for any messages waiting in the queue
and sends the message's associated function to the call stack
Finally, the JS runtime executes the last frame and removes it form the call stack