Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

What is the difference between Microtask Queue and Callback Queue in asynchronous JavaScript ?

  • Last Updated : 01 Jul, 2021

To know the difference between Microtask Queue and Callback Queue, we need to have a clear idea of how does asynchronous JavaScript gets executed and what are the roles that Microtask Queue and Callback Queue play.

Functions or operations running parallel with the other functions or operations are called asynchronous functions or operations in JavaScript. Asynchronous JavaScript code requires Callback functions that get executed later after the desired time. 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Example: Below code illustrates the use of setTimeout() function in JavaScript.

Javascript




<script>
  setTimeout(function greet() {
    console.log("Welcome to GeeksforGeeks!");
  }, 2000);
</script>

Now, after this desired time, the code needs to passed to the Call Stack, but this Call Stack doesn’t provide a timer by which we can delay the execution of the code. So, it uses the help of a web API setTimeout() which is available in the window global object in the browser. After a certain time period, Call Stack gets the code through Event Loop which fetches the Callback functions to Call Stack. But, Callback functions can’t directly go to the Event loop.



So, here comes the role of Microtask Queue and Callback Queue. These Queues work as a mediator, once the timer gets expired the callback functions are put inside these queues serially. And whenever the Call stack is empty, the event loop fetches them to Call Stack in FIFO order. 

But, we need Microtask Queue and Callback Queue for different purposes. Let’s see the comparison between them.

Callback Queue: After the timer gets expired, the callback function is put inside the Callback Queue, and the Event Loop checks if the Call Stack is empty and if empty, pushes the callback function from Callback Queue to Call Stack and the callback function gets removed from the Callback Queue. Then the Call Stack creates an Execution Context and executes it.  

Microtask Queue: Microtask Queue is like the Callback Queue, but Microtask Queue has higher priority. All the callback functions coming through Promises and Mutation Observer will go inside the Microtask Queue. For example, in the case of .fetch(), the callback function gets to the Microtask Queue. Promise handling always has higher priority so the JavaScript engine executes all the tasks from Microtask Queue and then moves to the Callback Queue.

Callback QueueMicrotask Queue
Callback Queue gets the ordinary callback functions coming from the setTimeout() API after the timer expires.Callback Queue gets the callback functions coming through Promises and Mutation Observer.
Callback Queue has lesser priority than Microtask Queue of fetching the callback functions to Event Loop.Microtask Queue has higher priority than Callback Queue of fetching the callback functions to Event Loop.
My Personal Notes arrow_drop_up
Recommended Articles
Page :