setTimeout、Promise、Async/Await 的區別

1、JS是單線程語言，包括同步任務、異步任務，異步任務又包括宏觀任務和微觀任務

2、執行順序：同步任務——>微觀任務——>宏觀任務

3、宏觀任務的方法有：script(整體代碼)、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js 環境)

4、微觀任務的方法有：Promise.then、MutaionObserver、process.nextTick(Node.js 環境)，async/await實際上是promise+generator的語法糖，也就是promise，也就是微觀任務

 

1. setTimeout

console.log('script start')	//1. 打印 script start
setTimeout(function(){
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 調用 setTimeout 函數，並定義其完成后執行的回調函數
console.log('script end')	//3. 打印 script start
// 輸出順序：script start->script end->settimeout

　　

2. Promise

console.log('script 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('script end')
// 輸出順序: script start->promise1->promise1 end->script end->promise2->settimeout

　　

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