瀏覽器事件迴圈
阿新 • • 發佈:2020-08-03
new Promise((resolve, reject) => { // @1 console.log('執行Promise') resolve(11111) }).then(res => { // @2 console.log(res) // 11111 }) console.log('開始!') // @3 /* 結果執行順序: 執行Promise 開始! 11111 由此可知 @1是同步 @2(也就是then裡面)是非同步*/
瀏覽器事件迴圈
- macro-task(巨集任務):包括整體程式碼script,setTimeout,setInterval
- micro-task(微任務):Promise,process.nextTick
不同型別的任務會進入對應的Event Queue(迴圈佇列),比如setTimeout和setInterval會進入相同的Event Queue。
事件迴圈的順序,決定js程式碼的執行順序。進入整體程式碼(巨集任務)後,開始第一次迴圈。接著執行所有的微任務。然後再次從巨集任務開始,找到其中一個任務佇列執行完畢,再執行所有的微任務。'
setTimeout(function() { console.log('setTimeout'); }) new Promise(function(resolve) { console.log('promise'); resolve('then') }).then(function(res) { console.log(res); }) console.log('console'); /* 1.這段程式碼作為巨集任務,進入主執行緒。 2.先遇到setTimeout,那麼將其回撥函式註冊後分發到巨集任務Event Queue。(註冊過 程與上同,下文不再描述) 3.接下來遇到了Promise,new Promise立即執行,then函式分發到微任務Event Queue。 4.遇到console.log(),立即執行。 5.到這,整體程式碼script作為第一個巨集任務執行結束,看看有哪些微任務?我們發現了 then在微任務Event Queue裡面,執行。 6.ok,第一輪事件迴圈結束了,我們開始第二輪迴圈,當然要從巨集任務Event Queue開 始。我們發現了巨集任務Event Queue中setTimeout對應的回撥函式,立即執行。 7.結束。 列印順序: promise console then setTimeout*/