JavaScript Event Loop
Context of discussion
• Execution of JavaScript code inside a web browser
• How a long running task can make a web page non-responsive.
• What is an asynchronous task?
2
Asynchronous functions in JavaScript
• An asynchronous function in JavaScript is a function that allows
a program to continue executing other code while waiting for an
operation (such as a timer, file read, call to an API) to complete.
• All async function calls are sent to browser Web API which starts
the required operation on a separate thread.
• Each async function call has an associated callback function,
which is invoked after the async operation is complete.
3
JavaScript: Code Execution
• JavaScript is single threaded, i.e., there is a single main thread on
which JavaScript code executes.
• The JavaScript engine executes the JavaScript code in an html file
starting from the top of the file and continues towards the end of
the file.
• During the execution, it creates the required execution contexts, and
pushes and pops functions (activation records) onto and off the call
stack.
• If a JavaScript function takes a long time to execute (called a blocking function), a user cannot
interact (mouse clicks etc.) with the web browser during the function’s execution.
• Examples of blocking functions
• Call to an API on a remote server.
• Reading from or writing to files
4
Web Browsers
• JavaScript engine (JavaScript execution/host environment) is just
one of the many components in a web browser.
• A JavaScript engine is JavaScript runtime environment for execution of
JavaScript code.
• A web browser can do many other tasks concurrently and
asynchronously.
• For example, call to a remote API can be performed on a separate thread
• Node.js is also a JavaScript execution/host environment.
5
JavaScript: Event Loop
Image src: https://www.javascripttutorial.net/javascript-event-loop/
1. The call stack keeps track of the currently executing function.
2. All async function calls are sent to browser Web API which start the operation on a
separate thread.
1. When an async operation is complete, its corresponding callback function is placed in
Callback Queue.
3. The event loop continuously checks the call stack and the callback queue.
1. Whenever, the call stack is empty, it takes the first function from the callback queue and
pushes it onto the call stack for execution.
2. The event loop repeats this process, ensuring that the call stack is always empty before
taking the next function from the callback queue.
6
Web/Browser APIs
• Web APIs (also called Browser APIs) are interfaces provided by web
browsers that allow JavaScript to interact with the web browser, i.e.,
they provide functionality to perform some additional tasks which, if
run on the JavaScript main thread, will block user interaction. Web APIs
are not part of JavaScript engine.
• For example, operations performed by the following APIs are executed
on separate threads:
• Manipulating DOM using DOM API
• setTimeout, setInterval
• Fetch APIs, for network requests
• Web Sockets, for low-level bidirectional communication
7
How setTimeout works
• The setTimeout function executes a function once after a specified delay (in
milliseconds).
• Parameters of setTimeout function
• A callback function
• Delay (time in milliseconds)
• setTimeout(
function () { console.log("Inside the callback function."); } Callback function
10000); Delay (milliseconds)
8
How setTimeout works
• A call is made to the function setTimeout. The call is made from JavaScript main thread.
• The callback function and the delay are registered with the browser’s Web API
• The following happens on separate threads
• JavaScript engine keeps executing the code below the call to the setTimeout function on the JavaScript
main thread (single thread).
• The Web API timer waits for the specified delay. This happens on a separate thread in background
without affecting the execution on the JavaScript main thread. When the delay is over, the callback
function is moved to the Callback (Message) Queue.
• The Event Loop continuously checks whether the Call Stack is empty, i.e., there is no code
to execute on the JavaScript main thread.
• If the Call Stack is empty, the callback function is moved to the Call Stack for execution, and then the
callback function gets executed.
