這題主要是考察這三者在事件循環中的區別，事件循環中分為宏任務隊列和微任務隊列。 * 其中settimeout的回調函數放到宏任務隊列里，等到執行棧清空以后執行； * promise.then里的回調函數會放到相應宏任務的微任務隊列里，等宏任務里面的同步代碼執行完再執行； * async函數表示函數里面可能會有異步方法，await后面跟一個表達式，async方法執行時，遇到await會立即執行表達式，然后把表達式后面的代碼放到微任務隊列里，讓出執行棧讓同步代碼先執行。 ### 1. setTimeout ~~~js 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 Promise本身是**同步的立即執行函數**， 當在executor中執行resolve或者reject的時候, 此時是異步操作， 會先執行then/catch等，當主棧完成后，才會去調用resolve/reject中存放的方法執行，打印p的時候，是打印的返回結果，一個Promise實例。 ~~~js 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 ~~~ 當JS主線程執行到Promise對象時， * promise1.then() 的回調就是一個 task * promise1 是 resolved或rejected: 那這個 task 就會放入當前事件循環回合的 microtask queue * promise1 是 pending: 這個 task 就會放入 事件循環的未來的某個(可能下一個)回合的 microtask queue 中 * setTimeout 的回調也是個 task ，它會被放入 macrotask queue 即使是 0ms 的情況 ### 3. async/await ~~~js async function async1(){ console.log('async1 start'); //2 await async2(); console.log('async1 end') //5 } async function async2(){ console.log('async2') //3 } console.log('script start'); //1 async1(); console.log('script end') //4 // 輸出順序： ->script start ->async1 start ->async2 ->script end ->async1 end ~~~ async 函數返回一個 Promise 對象，當函數執行的時候，一旦遇到 await 就會先返回，等到觸發的異步操作完成，再執行函數體內后面的語句。可以理解為，是讓出了線程，跳出了 async 函數體。 舉個例子： ~~~js async function func1() { return 1 } console.log(func1()) ~~~  很顯然，func1的運行結果其實就是一個Promise對象。因此我們也可以使用then來處理后續邏輯。 ~~~js func1().then(res => { console.log(res); // 30 }) ~~~ await的含義為等待，也就是 async 函數需要等待await后的函數執行完成并且有了返回結果（Promise對象）之后，才能繼續執行下面的代碼。await通過返回一個Promise對象來實現同步的效果。 ## 摘自 [ setTimeout、Promise、Async/Await 的區別](https://www.muyiy.cn/question/async/8.html) [JS 的執行機制](http://www.hmoore.net/freya001/web-knowledge/703311) [JS Event Loop 和 Microtask Macrotask](https://github.com/FoooooooF/FrontEnd-Knowledge-Point/blob/master/kernel/event_loop.md)