What is the difference between microtask queue and callback queue in asynchronous JavaScript?-JS Tutorial-php.cn

What is the difference between microtask queue and callback queue in asynchronous JavaScript?

PHPz

Release： 2023-08-24 09:33:02

forward

556 people have browsed it

异步 JavaScript 中微任务队列和回调队列有什么区别？

In asynchronous JavaScript, there are two ways to schedule tasks - Microtask Queue and Callback Queue. The JavaScript engine handles these two queues differently.

Microtask Queue

Microtask Queue is a task queue that is executed after the current task. The microtask queue is processed by the JavaScript engine before moving to the next task in the callback queue.

Example

The following is an example of how the microtask queue works -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      Promise.resolve().then(function() {
         console.log(&#39;promise resolve&#39;);
      });
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

Copy after login

In the above example, the "setTimeout" callback is added to the callback in queue. "Promise.resolve" is added to the microtask queue. The JavaScript engine will first execute all tasks in the microtask queue before entering the callback queue.

So the output of the above code will be (In the console) -

start
end
promise resolve
setTimeout

Copy after login

Callback Queue

Callback Queue is A queue of tasks to be executed after the current task. Callback Queue Processed by the JavaScript engine after executing all tasks in the microtask queue.

Example

The following is an example of how the callback queue works -

<!doctype html>
<html>
<head>
   <title>Examples</title>
</head>
<body>
   <div id="result"></div>
   <script>
      console.log(&#39;start&#39;);
 
      setTimeout(function() {
         console.log(&#39;setTimeout&#39;);
      }, 0);
 
      console.log(&#39;end&#39;);
   </script>
</body>
</html>

Copy after login

In the above example, the 'setTimeout' callback is added to the callback queue middle. The JavaScript engine will execute the "setTimeout" callback after executing all code in the current task.

So the output of the above code will be (In the console) -

start
end
setTimeout

Copy after login

Difference between Microtask Queue and Callback Queue

Microtasks Queues and Callbacks Some differences between Queues are-

##Microtask Queues are processed by the JavaScript engine and then Then move to the next task in the callback queue. CallbackThe queue is processed by the JavaScript engine after all tasks in the microtask queue are executed.

Microtask Processed after the current task of the queue is completed. CallbackThe queue is processed after the microtask queue is empty.

MicrotasksThe queue is processed in a separate event loop. CallbacksThe queue is processed in the same event loop.

Advantages of microtask queue

Some advantages of microtask queue Microtask queue on callback queue are-

The microtask queue is processed in a separate event loop, which means that if the main thread is blocked, the microtask queue will still
The microtask queue is processed after the current task is completed, which means Any code that depends on the current task can be added to the microtask queue and it will be processed. Executed immediately after the current task is completed.
The microtask queue has a higher priority than the callback queue, which means that if both queues are scheduled to execute at the same time, the microtask queue will execute first.

Advantages of the callback queue

One of the advantages of the callback queue over the microtask queue is that the callback queue is processed in the same event loop as the main thread. This means that if the main thread is blocked, the callback queue will not be processed.

Conclusion

In this tutorial, we looked at the difference between microtask queues and callback queues in asynchronous JavaScript. We also looked at the merits of each cohort.

The above is the detailed content of What is the difference between microtask queue and callback queue in asynchronous JavaScript?. For more information, please follow other related articles on the PHP Chinese website!