Event loop (also called EventLoop)
js execution is single-threaded execution code, if there is no event queue, js execution code will be blocked, so an event queue is needed, when js executes code, it encounters script, setTimeout, promise, renderer, user interaction event, or introduces an external linklink When waiting for microtasks and macrotasks (that is, asynchronous code), these microtasks and macrotasks need to be placed in the micro/macrotask queue in order. When the js code is executed from top to bottom, check the event queue (eventLoop) Is there a micro/macro task? If so, execute the micro task first, and clear all the micro tasks in the micro task queue. After clearing all the micro tasks, execute the macro tasks one by one until all the macro tasks are executed. .
The simple diagram of the execution sequence in the above figure:
According to the following code summary as follows:
If it is a macro task, all the macro tasks will be put into the queue, and the macro tasks will be executed one by one. When the first macro task is executed, if there are micro tasks in the macro task, all the micro tasks in the macro task will be cleared, and then Then execute the second macro task
Put all the macro tasks of the execution stack into the queue at one time, and then execute the first macro task. When the first macro task is executed, it is found that there are still macro tasks in the macro task, then take out the macro task inside and put it in the queue Queue in the task, when all the macro tasks of the first layer are executed, execute the macro tasks queued in the second layer in order
Put all the microtasks of the execution stack into the queue and wait for execution. When the first microtask is executed, it is found that there are still microtasks in the microtask, then the microtasks in it are taken out and placed behind the microtask queue. When
all The execution of the first layer of microtasks is completed, and the microtasks inside are executed according to the queue
<button id="button"></button>
<script>
let button = document.querySelector('#button')
button.addEventListener('click', () => {
console.log('listener1');
Promise.resolve().then(() => console.log('micro task1'))
})
button.addEventListener('click', () => {
console.log('listener2');
Promise.resolve().then(() => console.log('micro task2'))
})
// button.click(); // click1() click2()
// listener1 micro task1 listener2 micro task2
Promise.resolve().then(() => {
fn()
fn2()
})
function fn() {
Promise.resolve().then(() => {
console.log('promise1')
// return Promise.resolve()
Promise.resolve().then(() => {
console.log("promise2")
})
})
}
function fn2() {
Promise.resolve().then(() => {
console.log("promise 3")
// return Promise.resolve()
Promise.resolve().then(() => {
console.log('promise4')
})
})
}
setTimeout(() => {
console.log(1)
setTimeout(() => {
console.log(2)
})
})
setTimeout(() => {
console.log(3)
setTimeout(() => {
console.log(4)
})
})
</script>
Classic practice questions to consolidate micro/macro tasks (if you want to know the answer, tap it yourself, you will have unexpected gains)
Promise.resolve().then(() => {
console.log('Promise1')
setTimeout(() => {
console.log('setTimeout2')
}, 0);
})
setTimeout(() => {
console.log('setTimeout1');
Promise.resolve().then(() => {
console.log('Promise2')
})
}, 0);
console.log(1);
async function async() {
console.log(2);
await console.log(3);//提点一下：这里的写法相当于 yield console.log(3)
// Promise.resolve(console.log(3)).then(()=>console.log(4))
console.log(4)
}
setTimeout(() => {
console.log(5);
}, 0);
const promise = new Promise((resolve, reject) => {
console.log(6);
resolve(7)
})
promise.then(res => {
console.log(res)
})
async();
console.log(8);