“一个不靠谱码农的笔记集合”
Posted on 2022-03-11 0 Views
The eventloop mechanism is key to Javascript's implementation of pseudo-"multithreading." This part is also a question that is often asked in interviews, take a note for reference.
To be clear, JavaScript is a single-threaded language. All tasks in JavaScript are divided into one of three categories:
JavaScript implements asynchronous tasks by frequently switching between these tasks.
In terms of the overall execution mechanism, JavaScript handles the task at hand in the following order:
setTimeout, setInterval, setImmediateNative Promiseprocess.nextTick(node.js)Object.observeMutationObserverAsynchronous events in an Event Queue are executed according to the following flowchart:
console.log(1)
new Promise((resolve, reject) => {
console.log(2)
resolve()
}).then(res => {
console.log(3)
})
console.log(4)Output: 1 2 4 3
Interpretation:
console.log(1) and output 1.a new Promise is encountered, immediately execute console.log(2) output 2, and register the .then callback function in the Event Queue.console.log(4) and output 4.console.log(3) and output 3.console.log('start')
setTimeout(() => {
console.log('setTimeout')
}, 0)
new Promise((resolve) => {
console.log('promise')
resolve()
}).then(() => {
console.log('then1')
}).then(() => {
console.log('then2')
})
console.log('end')
Output: start promise end then1 then2 setTimeout
Interpretation:
console.log (start) and output start.setTimeout is encountered, put the callback into the macro task queue.a new promise is encountered, immediately execute the console.log (promise) output the promise, and put two .then callback functions into the microtask queue.console.log(end) and output end.then1, then2. console.log (setTimeout) and output setTimeout.console.log('start')
setTimeout(() => {
console.log('setTimeout')
new Promise((resolve) => {
console.log('promise2')
resolve()
}).then( () => {
console.log('then3')
})
}, 0)
new Promise((resolve) => {
console.log('promise1')
resolve()
}).then(() => {
console.log('then1')
}).then(() => {
console.log('then2')
})
console.log('end')
Output: start promise1 end then1 then2 setTimeout promise2 then3
Interpretation:
console.log (start) and output start.setTimeout is encountered, put the callback into the macro task queue.a new promise is encountered, immediately execute console.log(promise1) to output promise1, and put two .then callback functions into the microtask queue.console.log(end) and output end.then1, then2. console.log (setTimeout) and output setTimeout.the new promise from the previous macro task, immediately execute the console.log ('promise 2'), output promise 2, and put .then into the microtask queue.console.log (then3) and output then3.console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})Output: 1 7 6 8 2 4 3 5 9 11 10 12
Interpretation:
console.log(1) and output 1.setTimeout is encountered, put the callback into the macro task queue.process.nextTick, put the function in the microtask queue.new Promise is encountered, immediately execute console.log(7) output 7, and put the .then callback function into the microtask queue. setTimeout is encountered, put the callback into the macro task queue.6,8.setTimeout macro task console.log(2) and output 2.process.nextTick, put the function in the microtask queue.new promise is encountered, immediately execute the console.log(4) output 4, and put the .then callback function into the microtask queue.of 3,5.setTimeout macro task console.log(9) and output 9.process.nextTick, put the function in the microtask queue.new Promise is encountered, immediately execute the console.log(11) output 11, and put the .then callback function into the microtask queue. 10, 12.Recently encountered a related issue while dealing with react-redux's useSelector and useState hooks combined. Multiple setStates in the same useEffect, and the initial state and final state coincide, do not trigger the corresponding dependencies in other hooks. After using the new Promise(resolve=> setTimeout(resolve, 0)), the problem no longer occurs, which triggers the motivation to write this note. Speculation may be related to React's reconciliation mechanism, and it is necessary to dig deeper into React's code.
