async ，await，setTimeout，Promise函数

这道题主要考察的是事件循环中函数执行顺序的问题，其中包括async ，await，setTimeout，Promise函数。下面来讲一下本题中涉及到的知识点。

 

//请写出输出内容
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');


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

首先咱们须要明白如下几件事情：

• JS分为同步任务和异步任务
• 同步任务都在主线程上执行，造成一个执行栈
• 主线程以外，事件触发线程管理着一个任务队列，只要异步任务有了运行结果，就在任务队列之中放置一个事件。
• 一旦执行栈中的全部同步任务执行完毕（此时JS引擎空闲），系统就会读取任务队列，将可运行的异步任务添加到可执行栈中，开始执行。

任务队列(task queue)，一个任务队列即是一系列有序任务(task)的集合；每一个任务都有一个任务源(task source)，源自同一个任务源的 task 必须放到同一个任务队列，从不一样源来的则被添加到不一样队列。setTimeout/Promise 等API即是任务源，而进入任务队列的是他们指定的具体执行任务。

宏任务：(macro)task（又称之为宏任务）

微任务：microtask（又称为微任务）

运行：

• 执行一个宏任务（栈中没有就从事件队列中获取）
• 执行过程当中若是遇到微任务，就将它添加到微任务的任务队列中
• 宏任务执行完毕后，当即执行当前微任务队列中的全部微任务（依次执行）
• 当前宏任务执行完毕，开始检查渲染，而后GUI线程接管渲染
• 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

https://www.ximalaya.com/yinyue/25395682/
https://www.ximalaya.com/yinyue/25395691/
https://www.ximalaya.com/yinyue/25371172/
https://www.ximalaya.com/yinyue/25371180/
https://www.ximalaya.com/yinyue/25371165/
https://www.ximalaya.com/yinyue/25371160/
https://www.ximalaya.com/yinyue/25371154/
https://www.ximalaya.com/yinyue/25371139/
https://www.ximalaya.com/yinyue/25371144/
https://www.ximalaya.com/yinyue/25371134/
https://www.ximalaya.com/yinyue/25371129/
https://www.ximalaya.com/yinyue/25371103/
https://www.ximalaya.com/yinyue/25371093/
https://www.ximalaya.com/yinyue/25371073/
https://www.ximalaya.com/yinyue/25371080/
https://www.ximalaya.com/yinyue/25371065/
https://www.ximalaya.com/yinyue/25371060/
https://www.ximalaya.com/yinyue/25371052/
https://www.ximalaya.com/yinyue/25371048/
https://www.ximalaya.com/yinyue/25371038/
https://www.ximalaya.com/yinyue/25371024/
https://www.ximalaya.com/yinyue/25370987/
https://www.ximalaya.com/yinyue/25370978/