1. 程式人生 > 實用技巧 >瀏覽器事件迴圈

瀏覽器事件迴圈

    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
*/

參考:https://www.cnblogs.com/Mr-Rshare/p/11243209.html