摘要：分析題目先執(zhí)行微任務(wù)后執(zhí)行宏任務(wù)因此結(jié)果為按照這個思路做以下題目做出如下更改運行結(jié)果為更改如下更改如下運行結(jié)果為運行結(jié)果為運行結(jié)果為參考自

參考自https://github.com/Advanced-F...

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    console.log("async2");
}
console.log("script start");
setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();
new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

運行結(jié)果為:

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

這道題涉及到事件循環(huán)中函數(shù)執(zhí)行順序的問題,其中包括async,await,setTimeout,Promise函數(shù)

1.event loop
JS主線程不斷的循環(huán)往復(fù)的從任務(wù)隊列中讀取任務(wù),執(zhí)行任務(wù),這種運行機制為事件循環(huán).

2.Microtasks, Macrotasks
Microtasks(微任務(wù))和Macrotasks(宏任務(wù))是異步任務(wù)的一種類型,Microtasks的優(yōu)先級要高于Macrotasks,下面是它們所包含的api:

microtasks

process.nextTicks
promise
Object.observe
MutationObserver



macrotasks

setTimeout
setImmerdiate
I/O
UI渲染

1. 每一個 event loop 都有一個 microtask queue
2. 每個 event loop 會有一個或多個macrotaks queue ( 也可以稱為task queue )
3. 一個任務(wù) task 可以放入 macrotask queue 也可以放入 microtask queue中
4. 每一次event loop，會首先執(zhí)行 microtask queue， 執(zhí)行完成后，會提取 macrotask queue 的一個任務(wù)加入 microtask queue， 接著繼續(xù)執(zhí)行microtask queue，依次執(zhí)行下去直至所有任務(wù)執(zhí)行結(jié)束。

分析題目:

先執(zhí)行微任務(wù)后執(zhí)行宏任務(wù),因此結(jié)果為

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

按照這個思路,做以下題目:

async function async1() {
    console.log("async1 start");
    await async2();
    console.log("async1 end");
}
async function async2() {
    //async2做出如下更改：
    new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
    });
}
console.log("script start");

setTimeout(function() {
    console.log("setTimeout");
}, 0)
async1();

new Promise(function(resolve) {
    console.log("promise3");
    resolve();
}).then(function() {
    console.log("promise4");
});

console.log("script end");

運行結(jié)果為:

script start
async1 start
promise1
promise3
script end
promise2
async1 end
promise4
setTimeout

async function async1() {
    console.log("async1 start");
    await async2();
    //更改如下：
    setTimeout(function() {
        console.log("setTimeout1")
    },0)
}
async function async2() {
    //更改如下：
    setTimeout(function() {
        console.log("setTimeout2")
    },0)
}
console.log("script start");

setTimeout(function() {
    console.log("setTimeout3");
}, 0)
async1();

new Promise(function(resolve) {
    console.log("promise1");
    resolve();
}).then(function() {
    console.log("promise2");
});
console.log("script end");

運行結(jié)果為

script start
async1 start
promise1
script end
promise2
setTimeout3
setTimeout2
setTimeout1

async function a1 () {
    console.log("a1 start")
    await a2()
    console.log("a1 end")
}
async function a2 () {
    console.log("a2")
}

console.log("script start")

setTimeout(() => {
    console.log("setTimeout")
}, 0)

Promise.resolve().then(() => {
    console.log("promise1")
})

a1()

let promise2 = new Promise((resolve) => {
    resolve("promise2.then")
    console.log("promise2")
})

promise2.then((res) => {
    console.log(res)
    Promise.resolve().then(() => {
        console.log("promise3")
    })
})
console.log("script end")

運行結(jié)果為

script start
a1 start
a2
promise2
script end
promise1
a1 end
promise2.then
promise3
setTimeout

async function async1() {
    console.log("async1 start")
    await async2()
    console.log("async1 end")
}
async function async2() {
    console.log("async2")
}
console.log("script start")
setTimeout(function () {
    console.log("settimeout")
})
async1()
new Promise(function (resolve) {
    console.log("promise1")
    resolve()
}).then(function () {
    console.log("promise2")
})
console.log("script end")

運行結(jié)果為

script start
async1 start
async2
promise1
script end
async1 end
promise2
settimeout

參考自https://github.com/Advanced-F...