代码题: 看代码说结果, 事件循环 + async 函数的

1. 基本的 async/await 和事件循环

console.log('1');

async function asyncFunc() {
    console.log('2');
    await Promise.resolve();
    console.log('3');
}

asyncFunc();

console.log('4');

执行顺序：

1. 打印 1
2. 定义异步函数 asyncFunc，但并不执行它。
3. 调用 asyncFunc()。
   • 打印 2
   • 遇到 await，所以 asyncFunc 的后续代码（打印 3）被移到事件队列中等待。
4. 打印 4
5. 所有同步代码执行完毕后，事件循环开始执行队列中的任务。
   • 打印 3

预期输出：

1
2
4
3

2. setTimeout 和 async/await 的结合

console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

async function asyncFunc() {
    console.log('3');
    await Promise.resolve();
    console.log('4');
}

asyncFunc();

console.log('5');

执行顺序：

1. 打印 1
2. 将 setTimeout 回调（打印 2）设置为在0毫秒后执行。但实际上，它会被放入宏任务队列，等待所有微任务完成。
3. 定义异步函数 asyncFunc，但并不执行。
4. 调用 asyncFunc()。
   • 打印 3
   • 遇到 await，所以 asyncFunc 的后续代码（打印 4）被移到微任务队列中等待。
5. 打印 5
6. 执行微任务队列中的任务（因为微任务的优先级高于宏任务）。
   • 打印 4
7. 执行宏任务队列中的任务。
   • 打印 2

预期输出：

1
3
5
4
2

3. 嵌套的 async/await

console.log('1');

async function firstAsync() {
    console.log('2');
    await secondAsync();
    console.log('3');
}

async function secondAsync() {
    console.log('4');
    await Promise.resolve();
    console.log('5');
}

firstAsync();

console.log('6');

执行顺序：

1. 打印 1
2. 定义两个异步函数，但不执行。
3. 调用 firstAsync()。
   • 打印 2
   • 调用 secondAsync()。
     • 打印 4
     • 遇到 await，所以 secondAsync 的后续代码（打印 5）被移到微任务队列中等待。
   • firstAsync 的后续代码（打印 3）也被移到微任务队列中等待。
4. 打印 6
5. 执行微任务队列中的任务。
   • 打印 5
   • 打印 3

预期输出：

1
2
4
6
5
3

4. 多个异步函数

async function asyncOne() {
    console.log('1');
    await Promise.resolve();
    console.log('2');
}

async function asyncTwo() {
    console.log('3');
    await Promise.resolve();
    console.log('4');
}

console.log('5');

asyncOne();
asyncTwo();

console.log('6');

执行顺序：

1. 定义两个异步函数，但不执行。
2. 打印 5
3. 调用 asyncOne()。
   • 打印 1
   • 遇到 await，所以 asyncOne 的后续代码（打印 2）被移到微任务队列中等待。
4. 调用 asyncTwo()。
   • 打印 3
   • 遇到 await，所以 asyncTwo 的后续代码（打印 4）被移到微任务队列中等待。
5. 打印 6
6. 执行微任务队列中的任务。
   • 打印 2
   • 打印 4

预期输出：

5
1
3
6
2
4

5. Promise 的基本行为

console.log('1');

Promise.resolve().then(() => {
    console.log('2');
});

console.log('3');

执行顺序：

1. 打印 1
2. 创建一个已解决的Promise，并在微任务队列中注册一个回调。
3. 打印 3
4. 当同步代码执行完成后，事件循环开始处理微任务队列，执行回调。
5. 打印 2

预期输出：

1
3
2

6. setTimeout 与 Promise 的组合

console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

Promise.resolve().then(() => {
    console.log('3');
}).then(() => {
    console.log('4');
});

console.log('5');

执行顺序：

1. 打印 1
2. 将setTimeout的回调加入宏任务队列
3. 创建一个已解决的Promise，并在微任务队列中注册第一个回调
4. 在第一个then的回调中，注册第二个then的回调到微任务队列
5. 打印 5
6. 事件循环开始处理微任务，首先执行第一个then的回调
7. 打印 3
8. 紧接着，事件循环处理第二个then的回调
9. 打印 4
10. 最后，事件循环处理宏任务队列
11. 打印 2

预期输出：

1
5
3
4
2

7. 多个 async/await 的嵌套

console.log('1');

async function outerAsync() {
    console.log('2');
    await innerAsync();
    console.log('3');
}

async function innerAsync() {
    console.log('4');
    await new Promise(resolve => setTimeout(resolve, 0));
    console.log('5');
}

outerAsync();

console.log('6');

执行顺序：

1. 打印 1
2. 定义两个异步函数，但此时并未执行它们
3. 调用 outerAsync()
4. 打印 2
5. 调用 innerAsync()
6. 打印 4
7. 遇到setTimeout，所以它的回调被加入宏任务队列
8. await将后续代码（打印 5 和 outerAsync 中的打印 3）移至微任务队列
9. 打印 6
10. 事件循环开始处理微任务，但在此之前，必须先完成setTimeout的回调**，必须要等里面完成才能完成外面**
11. 打印 5
12. 继续执行outerAsync中的代码
13. 打印 3

预期输出：

1
2
4
6
5
3

8. 多个微任务队列（这个不会）

console.log('1');

async function firstFunc() {
    console.log('2');
    await Promise.resolve();
    console.log('3');
}

async function secondFunc() {
    console.log('4');
    await Promise.resolve().then(() => {
        console.log('5');
    });
    console.log('6');
}

firstFunc();
secondFunc();
console.log('7');

执行顺序：

1. 打印 1
2. 调用 firstFunc()
3. 打印 2
4. await使其后续代码（打印 3）移到微任务队列中
5. 调用 secondFunc()
6. 打印 4
7. await和then使其后续代码（首先打印 5，然后打印 6）移到微任务队列中
8. 打印 7
9. 事件循环开始处理微任务队列
10. 打印 5
11. 打印 3
12. 打印 6

预期输出：

1
2
4
7
5
3
6

9. 复杂的async/await与setTimeout

console.log('1');

setTimeout(() => {
    console.log('2');
}, 0);

async function asyncFunction() {
    console.log('3');
    await Promise.resolve();
    console.log('4');
    setTimeout(() => {