1. 程式人生 > 其它 >JavaScript -- js程式碼的執行順序

JavaScript -- js程式碼的執行順序

原文:https://juejin.cn/post/6844903512845860872

我的簡單理解:

兩個佇列:一個巨集任務佇列,一個微任務佇列

一個事件迴圈

巨集任務包括:包括整體程式碼script,setTimeout,setInterval

微任務包括:Promise的then方法

執行步驟:

最初是整個執行程式碼作為一個巨集任務開始執行

遇到普通指令碼直接執行

遇到Promise(function(resolve, reject){xxx}).then(function(result){yyy}, function(error){zzz}) 這種Promise程式碼,

  則會直接執行第1個function程式碼xxx,

  如果xxx程式碼中呼叫了resoleve或者reject回撥,則會把對應的第2個或者第3個function加入到微任務佇列

遇到setTimeout(function(){xxx}, n),setInterval(function(){yyy}, n) 這種定時程式碼,則會在n秒後或者每n秒把對應的function加入到巨集任務佇列

當前執行的那個巨集任務結束後,從微任務佇列取出一個微任務執行,迴圈直到當前微任務佇列為空

然後從巨集任務佇列中取出一個巨集任務執行,重複上面的步驟

直到所有任務執行完成

console.log('1');

setTimeout(function() {
    console.log(
'2'); promise.then(function(re) { for (let i = 0; i < 1000000000; i++) { } console.log('3-' + re) }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }, 2000) promise = new Promise(function
(resolve) { console.log('7'); resolve('8'); console.log('pre 8'); }) console.log('pre 8 2'); promise.then(function(re) { console.log('1-' + re); promise.then(function(re) { console.log('1-1-' + re) }); }); console.log('hh'); promise.then(function(re) { console.log('2-' + re) promise.then(function(re) { console.log('2-1-' + re) }); }); setTimeout(function() { console.log('9'); new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) }, 2000)