每日技术：关于promise,async,setTimeout的执行顺序

前端100问第10题

参考：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 

 

请写出下面代码的运行结果

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');

我当时写的答案是：

1. script start
2. async1 start
3. async2
4. promise1
5. script end
6. promise2
7. async1 end
8. setTimeout

正确答案是：

1. script start
2. async1 start
3. async2
4. promise1
5. script end
6. async1 end
7. promise2
8. setTimeout

说明我仍是没有真正理解它们的执行顺序。因而看着大牛写的答案来学习。

 

任务队列

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

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

每一个任务都有一个任务源（task source），源自同一个任务源的task必须放到同一个任务队列，从不一样源来的则被添加到不一样队列。setTimeout/Promise等API就是任务源。

 

宏任务 （macro task）

每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

浏览器为了可以使得JS内部macro task与DOM任务可以有序的执行，会在一个macro task执行结束后，在下一个macro task执行开始前，对页面进行从新渲染。流程以下：

(macro)task -> 渲染 -> (macro)task ->...

(macro)task主要包含：script总体代码、setTimeout、setInterval、I/O、UI交互事件、postMessage、MessageChannel、setImmediate(Node.js环境)

微任务 （microtask）

在当前task执行结束后当即执行的任务。也就是说，在当前task任务后，下一个task以前，在渲染以前

因此它的响应速度相比setTimeout会更快，由于无需等渲染。也就是说，在某一个macrotask执行完后，就会将在它执行期间产生的全部microtask都执行完毕（在渲染前）

microtask主要包含：Promise.then、MutationObserver、process.nextTick(Node.js环境)

 

运行机制

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

 

写在Promise中的代码被当作同步任务当即执行。而在async/await中，在出现await以前，其中的代码也是当即执行。

await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，而后就会跳出整个async函数来执行后面的代码。

await后面的代码是microtask

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')      
}

等价于

async function async1() {
  console.log('async1 start')
  Promise.resolve(async2()).then(() => {
    console.log('async1 end')
  })    
}    

 

以上就是本道题涉及到的全部相关知识点了。下面咱们再回到这道题来一步一步看看怎么回事

 

1.首先，事件循环从宏任务队列开始，这个时候，宏任务队列中，只有一个script总体代码任务，当遇到任务源时，则会先分发任务到对应的任务队列中去。

2.而后咱们看到首先定义了两个async函数，而后遇到了console语句，直接输出script start.输出以后，script任务继续往下执行，遇到setTimeout,其做为一个宏任务源，则会先将其任务分发到对应的队列中

3.script任务继续往下执行，执行了async1()函数，输出async1 start,遇到await时，会将await后面的表达式执行一遍，因此紧接着输出async2,而后将await后面的代码也就是console.log('async1 end')加入到microtask中的Promise队列中。接着跳出async1函数来执行后面的代码

4.接着遇到Promise实例。因为Promise中的函数时当即执行的，然后续的.then则会被分发到microtask的Promise队列中。因此会先输出promise1, 而后执行resolve,将promise2分配到对应队列。

5.最后只有一句输出了script end，至此，全局任务就执行完毕了。

根据上述，每次执行完一个宏任务以后，回去检查是否存在Microtask，若是有，则执行Microtasks直至清空Microtask Queue

于是再script任务执行完毕以后，开始查找清空微任务队列。此时，微任务中，Promise队列有的两个任务async1 end和promise2，所以按前后顺序输出。当全部的Microtasks执行完毕以后，表示第一轮的循环就结束了。

6.第二轮循环依旧从宏任务队列开始，此时宏任务中只有一个setTimeout，取出直接输出便可，至此整个流程结束。

 

最后原答案做者又加了三个变式用来加深印象，很是好。

 

变式一

在第一个变式中将async2中的函数也变成Promise函数，代码以下：

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');

这一次我写的答案和做者给出的答案同样，以下：

1. script start
2. async1 start
3. promise1
4. promise3
5. script end
6. promise2
7. async1 end
8. promise4
9. 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');

这道题我给出的答案是：

1. script start
2. async1 start
3. promise1
4. script end
5. promise2
6. setTimeout2
7. setTimeout1
8. setTimeout3

正确答案是：

1. script start
2. async1 start
3. promise1
4. script end
5. promise2
6. setTimeout3
7. setTimeout2
8. setTimeout1

 

在输出为promise2以后，接下来会按照加入setTimeout队列的顺序来依次输出，经过代码咱们能够看到加入顺序为3 2 1，因此会按3,2,1的顺序来输出。

 

变式三

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')

答案：

1. script start
2. a1 start
3. a2
4. promise2
5. script end
6. promise1
7. a1 end
8. promise2.then
9. promise3
10. setTimeout