1. In the JS event loop mechanism, first remember an execution sequence formula: [Same] -> [Micro] -> [Macro]
1 Sync: First Class Citizen (SVIP)
2 Microtasks: Second Class Citizen (VIP)
3 Macro tasks: Third-class citizens (ordinary users)
2. What is the event loop mechanism?
To put it simply, after the execution is completed in the execution stack (the code pushed into the stack in turn is executed first), it then looks for micro tasks to execute, and finally looks for macro tasks to execute.
Everything entering these three stacks is called a task queue.
You can search for specific content by yourself, there are too many online
3. How to enter the respective queues?
The execution order of the program is from top to bottom, executed synchronously (executed line by line). If it encounters asynchronous, it will be skipped (asynchronous will wait for execution by itself, such as ajax, settimeout, promise.then(). Note that I am not talking about Promse. But the promise.then() method we often use)
3.1 Synchronous queue:
where i =0;
function(){}
console(),
promise(), promise itself is a first-class citizen of the same function. It is synchronous because it is a function, so the internal content is executed first, but promise.then(), promise.catch(), promise.finally( ) Three are micro tasks, just remember them.
Other normal js code
3.2 Microtask Queuing
promise.then(), promise.catch(), promise.finally(), these three brothers belong to the same family, just write it like this
awaitandasync
注意：微任务可没有Promise()人家是一等公民
3.3 宏任务列队
set family:setTimeout , setInterval, setImmediate（NodeJs）,
注意：setTimeout有个规定，时间小的优先执行，且其子内容都一起优先进入队列中
I/O
UI rendering
dom事件
ajax
===========(Disassembly completed)================================== ===
Don't waste your time growing up.
Fourth, test to see how to distinguish and do the questions
4.1
console.log(1)
setTimeout(function(){
console.log(4);
})
console.log(5)This one is simple: 1 5 4
Enter the stack in order
1 sync queue
console.log(1)
console.log(5)
2 setTimeout()
4.2
console.log(1)
setTimeout(function(){
console.log(100);
},500)
setTimeout(function(){
console.log(300);
},100)
console.log(5)Answer
1，5，300，100
Shortest execution priority
4.3
console.log(1);
console.log(2);
setTimeout(function(){
console.log(3);
setTimeout(function(){
console.log(6);
})
})
setTimeout(function(){
console.log(4);
setTimeout(function(){
console.log(7);
})
})
console.log(5)Answer
1，2，5，3，4，6，7
Sync: 1, 2, 5
Micro: none
Macro: The first layer setTimeout (3, 4), and then executes the internal setTimeout. Because there is no time, it still enters the queue from top to bottom, and because the advanced ones are executed first, 6 comes first, so the result is 6, 7
4.4
console.log(1);
console.log(2);
setTimeout(function(){
console.log(3);
setTimeout(function(){
console.log(6);
})
},400)
setTimeout(function(){
console.log(4);
setTimeout(function(){
console.log(7);
})
},100)
console.log(5)Answer:
1，2，5
4, 7 (they are short, they are pushed onto the stack first and executed first)
3, 6 (long time, executed later)
As mentioned just now, the setTimeout with the shortest time is executed first, and the sub-contents are also entered into the stack together, so 4 and 7 are output first, and then the first setTimeout: 3, 6 is executed.
4.5
console.log(1)
let promise = new Promise(function(resolve,reject){
console.log(2)
resolve(3)
}).then(function(data){
console.log(data)
})
setTimeout(function(){
console.log(4);
})
console.log(5)Answer
1，2，5
3 The promise.then() method is a micro task, that is, executed first (same->micro->macro)
4 macro tasks
promise(), it is an ordinary function, a first-class citizen , so it must be pushed onto the stack synchronously, that is, executed first, so it must output 1, 2, and then 5
But promise.then() is a microtask, and because it is the same as -> micro-> macro, it outputs 3 (3 is because there is resolve(3) in the promise), and finally outputs 4
Finally, let’s summarize and review:
-
All synchronization tasks are executed on the main thread, forming an execution stack.
-
In addition to the main thread, there is also a task queue. As long as the asynchronous task has running results, an event is placed in the task queue.
-
Once all synchronization tasks in the execution stack are executed, the system will read the task queue and put the events in the queue into the execution stack for sequential execution.
-
The main thread reads events from the task queue, and this process is cyclic.
Remember: [Same]->[Micro]->[Macro]