事件迴圈(Event Loop)
阿新 • • 發佈:2018-12-16
1.什麼是事件迴圈?
JavaScript為單執行緒執行的,所以是從上到下依次執行,js分為兩個任務,巨集任務和微任務
首先執行巨集任務(第一次就是執行所有的同步程式碼),再執行所有的微任務,執行完畢之後再次執行
巨集任務,執行完畢再次執行所有的微任務,也就是:
巨集任務 --> 微任務 --> 巨集任務 --> 微任務
2.什麼是巨集任務,微任務?
巨集任務:
script(全域性任務), setTimeout, setInterval, setImmediate, I/O, UI rendering. 微任務: process.nextTick, Promise.then, Object.observer, MutationObserver.3.案例深入解讀
setTimeout(function(){ console.log(1) },0) new Promise((resolve,reject)=>{ console.log(2) resolve(3) setTimeout(function(){ console.log(5) promise.resolve },0) }).then((val)=>{ console.log(val)
}) console.log(4)
解讀:
首先執行巨集任務(同步程式碼) :console.log(2) console.log(4)
再執行所有的微任務 console.log(3)
再一次從上到下執行所有的微任務:console.log(1) console.log(5)
所以正確答案是 2 4 3 1 5
我們再加大難度
console.log('start') setTimeout(() => { console.log('setTimeout 1') Promise.resolve().then(() => { console.log('promise 3') }).then(() => { console.log('promise 4') }).then(() => { setTimeout(() => { console.log('setTimeout 2') Promise.resolve().then(() => { console.log('promise 5') }).then(() => { console.log('promise 6') }) }, 0) }) }, 0) Promise.resolve().then(() => { console.log('promise 1') }).then(() => { console.log('promise 2') })
解讀:
我們先執行同步程式碼: start
微任務:promise 1 , promise 2
巨集任務: setTimeout 1
微任務:promise 3, promise 4
巨集任務:setTimeout 2 ,
微任務:promise 5,promise 6
正確答案