1. setTimeout
console.log('1 start') //1. 打印 script start
setTimeout(function(){
console.log('settimeout') // 4. 打印 settimeout
}) // 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数
console.log('2 end') //3. 打印 script start
// 输出顺序：
1 start->
2 end->
settimeout
2. Promise
Promise itself is a synchronous immediate execution function. When resolve or reject is executed in the executor, it is an asynchronous operation. Then/catch, etc. will be executed first, and the method stored in resolve/reject will be called after the main stack is completed. When executing and printing p, it is the returned result of printing, which is a Promise instance.
console.log('1 start')
let promise1 = new Promise(function (resolve) {
console.log('promise1')
resolve()
console.log('promise1 end')
}).then(function () {
console.log('promise2')
})
setTimeout(function(){
console.log('settimeout')
})
console.log('2 end')
// 输出顺序:
1 start->
promise1->
promise1 end->
2 end->
promise2->
settimeout
When the JS main thread executes to the Promise object,
-
The callback of promise1.then() is a task
-
promise1 is resolved or rejected: then this task will be put into the microtask queue of the current event loop round
-
Promise1 is pending: this task will be placed in the microtask queue of a certain (possibly next) round of the event loop in the future
-
The callback of setTimeout is also a task, it will be put into the macrotask queue even if it is 0ms
3. async/await
async function async1(){
console.log('async1 start');
await async2();
console.log('async1 end')
}
async function async2(){
console.log('async2')
}
console.log('script start');
async1();
console.log('script end')
// 输出顺序：
script start->
async1 start->
async2->
script end->
async1 end
The async function returns a Promise object. When the function is executed, once it encounters await, it will return first, wait until the triggered asynchronous operation is completed, and then execute the following statement in the function body. It can be understood as giving up the thread and jumping out of the async function body.
4.Event Loop：
setTimeout is a macro task
promise, and await is followed by a micro task,
so the synchronization code will be performed first in the order of execution, then Promise, Async/Await, and finally setTimeout.
5.Promise、Async/Await差异
Promise is resolve as an asynchronous method and will be executed in the microtask team, but the normal code before and after resolve is synchronous code; Async/Await will return a promise, and the order of await is from right to left, that is to say, await is on the right. The method also prioritizes the execution of the synchronization code, then gives up the thread and enters the micro task queue. The code below await can be understood as the code in the promise then.
async function async1() {
console.log( 'async1 start' )
await async2()
console.log( 'async1 end' )
}
async function async2() {
console.log( 'async2' )
}
console.log( 'script start' )
setTimeout( function () {
console.log( 'setTimeout' )
}, 0 )
async1();
new Promise( function ( resolve ) {
console.log( 'promise1' )
resolve();
} ).then( function () {
console.log( 'promise2' )
} )
console.log( 'script end' )
result:
