Shulou(Shulou.com)06/02 Report--

This article will explain in detail the difference between macrotask and microtask in JavaScript. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

First, let's take a look at a common interview question about promise and write down the order in which the numbers are printed:

SetTimeout (function () {

Console.log (4)

}

0)

New Promise (function (resolve) {

Console.log (1)

For (var I = 0; I < 10000; iTunes +) {

I = = 9999 & & resolve ()

}

Console.log (2)

}) .then (function () {

Console.log (5)

});

Console.log (3)

Before we output the results, let's look at two concepts, macrotasks and microtasks. Literally translated is large tasks and micro tasks. What is the difference between these two tasks in javascript? Microtasks takes precedence over macrotasks.

In the V8 engine implementation, the task queue is divided into macrotasks and microtasks. Each queue contains different tasks:

Macrotasks: script (overall code), setTimeout, setInterval, setImmediate, Izod O, UI rendering

Microtasks: process.nextTick, Promises, Object.observe, MutationObserver .

As you can see from the list, the functions in the then method in Promise in the above code are pushed into the microtasks queue, while the tasks of setTimeout are pushed into the macrotasks queue.

The above code encounters setTimeout during execution, adds its callback to macrotask queue, and then encounters promise.then and puts it into another queue, microtask queue. When the entire main thread is finished, the function execution is taken out of the microtask queue, and the function in the macrotask queue is not executed until all the tasks in the microtask queue are completed. Therefore, the callback of promise.then is executed before setTimeout.

In javascript, microtask queue takes precedence over macrotask queue execution. Microtask is equivalent to the VIP customer in the header picture. You can jump the queue at any time and insert between the first person and the second person. The first person is equivalent to the main thread that is executing and the second person is equivalent to the callback that macrotasks is about to execute.

The running result of the above code is: 1 2 3 5 4

About how the difference between macrotask and microtask in JavaScript is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.