First, you need to understand what is Event Loop? Event Loop is an operating mechanism of computer system. JavaScript uses this mechanism to solve some problems caused by single thread operation.
1. Why is JavaScript single threaded?
The single thread of JavaScript is related to its purpose. As a browser scripting language, JavaScript is mainly used to interact with users and manipulate dom. This determines that it can only be a single thread, otherwise it will bring very complex synchronization problems. For example, suppose that JavaScript has two threads at the same time. One thread adds content to a DOM node, and the other thread deletes the node. This will cause some problems.
2. Task queue
Single thread means that all tasks need to be queued for execution, and the next task will be executed only after the previous task is executed. If the last task takes a long time to execute, the next task has to wait all the time. If the CPU is busy because of the heavy workload of the task, wait and wait, but most of the time the CPU is idle, which is a little inappropriate. All tasks are divided into two types: synchronous tasks and asynchronous tasks.
Synchronization tasks are executed on the main thread to form an execution stack. Only after the previous task is executed, the next task will start.
Asynchronous task is to enter the sub thread instead of the main thread. It will not affect the work of the main thread, and the main thread will execute as usual. When the asynchronous task has some results, such as AJAX gets the data, the callback function will be put into the task queue.
When all synchronous tasks in the main thread's execution stack are completed, the system will read the task queue. The task queue is a first in first out queue, and the callback function in the task queue will be taken to the main thread for execution.
3. Macro task and micro task
Asynchronous tasks are divided into macro tasks and micro tasks
Macro task
Macro tasks include: the overall code block in the script tag, setTimeout, setInterval, etc
Micro task
Micro tasks include promise then(),$vue.nextTick et al
async await
async await is the syntax of ES7. Async should be written in front of a function declaration to indicate that the function is an asynchronous function; Await should be used in combination with async and written inside the async function, which is equivalent to turning the asynchronous function immediately following await into synchronous.
- For await, after await executes the following functions, the following synchronization logic will be placed at the end of the round of micro task execution stack.
understand
For my own understanding, when JavaScript is executing, there are three execution stacks, one is synchronous execution stack: all code is executed from top to bottom, and the previous step will block the next step. The second is the micro task execution stack: Javascript is executed from top to bottom. When a micro task is encountered, this callback function will be placed in the micro task execution stack. The third is the macro task execution stack. JavaScript is executed from top to bottom. When a macro task is encountered, this callback function will be placed in the macro task execution stack. When the code of the synchronous execution stack is executed, the system will find it in the micro task execution stack. When the tasks of the micro task execution stack are executed, the macro task execution stack will be executed.
example
- Example 1
console.log('1')
setTimeout(function () {
console.log('2')
});
new Promise(function (resolve) {
console.log('3');
resolve();
}).then(function () {
console.log('4')
setTimeout(function () {
console.log('5')
});
});
new Promise(function (resolve) {
console.log('6');
resolve();
}).then(function () {
console.log('7')
setTimeout(function () {
console.log('8')
});
});
- Example 2
async function aaa() {
function fun1 (num) {
console.log(num)
}
new Promise((res) => {
fun1(3);
res(4)
}).then((res) => {
fun1(res);
})
await fun1(1);
fun1(2)
}
aaa();
async function aaa() {
function fun (num) {
console.log(num)
}
new Promise((res) => {
fun(3);
res(4)
}).then((res) => {
fun(res);
})
setTimeout(() => {
fun(5);
},0)
await fun(1);
fun(2)
}
aaa();
- Example 3
async function async1() {
console.log(1)
await async2()
console.log(2)
}
async function async2() {
console.log(3)
}
console.log(4)
setTimeout( e =>{
console.log(5)
},0)
async1()
new Promise( res =>{
console.log(6)
res()
}).then( e => {
console.log(7)
})
console.log(8)