Micro task, macro task and event loop of JS

JS Asynchronous is divided into micro task and macro task

To understand micro and macro tasks, you need to know JS The order in which the code runs .

JS A single thread , That is, things can only be done one by one .

JS The task queue is executed after the main thread's task is executed .
Task queue ： stay JS Runtime , Execute the synchronized code first , Asynchronous code will be hung in the task queue , The asynchronous code of the task queue will not be executed until the main thread is completed .

console.log(1);
console.log(2);

setTimeout(()=>{
    
    console.log(3);
},0);

console.log(4);

First understand the execution sequence of the above code :
First execute the code of the main thread , So first output 1,2 encounter setTimeout when , because setTimeout Is asynchronous , So it will be hung in the task queue first , Then continue the execution of the main thread , Then the output 4, Main thread completed ,JS Will execute the code of the task queue , So the final output 3.
The output order is 1,2,4,3

---

Asynchrony can be divided into micro tasks and macro tasks .

Common macro tasks ：setTimeout、setInterval、DOM event 、setImmediate
Common micro tasks ：Promise、process.nextTick

above all —— Micro task takes precedence over macro task

	console.log(1);
    console.log(2);

    setTimeout(()=>{
    
        console.log(3);
    },0);
    console.log(4);

    Promise.resolve().then(()=>{
    
    	console.log(5);
    }

By analyzing the above code first, you will have a deeper understanding of micro tasks and macro tasks ;

JS First execute the code of the main thread , So first output 1,2 encounter setTimeout 了 , Just put setTimeout Hang in the task queue , Continue to execute the code of the main thread , Output 4, encounter Promise 了 , Also put Promise Hang in the task queue ; So for now, output 1,2,4; In the task queue ,Promise It's a micro task , Takes precedence over macro tasks , therefore Promise Execute first , Output 5,setTimeout Finally, execute , Output 3.

In sequence ：1,2,4,5,3.

---

Event Loop Also called JS Event cycle mechanism ;

We already know JS In addition to the main thread, the code also has a task queue ;Event Loop This means that the main thread has finished executing ,JS You will get the task in the task queue , After the task is completed, it will return to the task queue to get the task again , It just keeps cycling .