哔哩哔哩：JS 异步笔试题，请写出以下代码的执行结果

Dear 丶 2022-09-06 00:05 129阅读 0赞

点击上方 三分钟学前端，关注公众号

回复交流，加入前端编程面试算法每日一题群

面试官也在看的前端面试资料

var date = new Date() 
    
    console.log(1, new Date() - date) 
    
    setTimeout(() => {
        console.log(2, new Date() - date)
    }, 500) 
    
    Promise.resolve().then(console.log(3, new Date() - date)) 
    
    while(new Date() - date < 1000) {} 
    
    console.log(4, new Date() - date)

求上面的输出顺序和输出值，为什么？

**答案：**

1 0
    3 1
    4 1000
    2 1000

其中，关于时间差结果可能因为计算机性能造成的微小差异，可忽略不计

你答对了吗？下面我们由浅入深探索本题

## 由浅入深探索 Promise 异步执行 ##

首先，看一下 `event loop` 的基础必备内容

`event loop` 执行顺序：

*  首先执行 `script` 宏任务
 *  执行同步任务，遇见微任务进入微任务队列，遇见宏任务进入宏任务队列
 *  当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完
 *  执行浏览器 UI 线程的渲染工作
 *  检查是否有`Web Worker`任务，有则执行
 *  执行下一个宏任务，回到第二步，依此循环，直到宏任务和微任务队列都为空

**微任务包括：**`MutationObserver`、`Promise.then()或catch()`、`Promise为基础开发的其它技术，比如fetch API`、`V8`的垃圾回收过程、`Node独有的process.nextTick` 、 `Object.observe`（已废弃；`Proxy` 对象替代）

**宏任务包括**：`script` 、`setTimeout`、`setInterval` 、`setImmediate` 、`I/O` 、`UI rendering` 、 `postMessage` 、 `MessageChannel`

**注意：** 下面的题目都是执行在浏览器环境下

遇到不好理解的，可结合 【`promise` 源码实现：https://github.com/sisterAn/blog/issues/13】 进行理解，就很简单了

### 1. 同步 + Promise ###

#### 题目一： ####

var promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        console.log(2)
    })
    promise.then(()=>{
        console.log(3)
    })
    console.log(4)
    // 1
    // 2
    // 4
    // 3

**解析：**

*  首先明确， `Promise` 构造函数是同步执行的， `then` 方法是异步执行的
 *  开始 `new Promise` ，执行构造函数同步代码，输出 `1`
 *  再 `resolve()`， 将 `promise` 的状态改为了 `resolved` ，并且将 `resolve` 值保存下来，此处没有传值
 *  执行构造函数同步代码，输出 `2`
 *  跳出`promise`，往下执行，碰到 `promise.then` 这个微任务，将其加入微任务队列
 *  执行同步代码，输出 `4`
 *  此时宏任务执行完毕，开始检查微任务队列，执行 `promise.then` 微任务，输出 `3`

#### 题目二： ####

var promise = new Promise((resolve, reject) => {
        console.log(1)
    })
    promise.then(()=>{
        console.log(2)
    })
    console.log(3)
    // 1
    // 3

**解析：**

*  开始 `new Promise` ，执行构造函数同步代码，输出 `1`
 *  再 `promise.then` ，因为 `promise`中并没有`resolve` ，所以 `then` 方法不会执行
 *  执行同步代码，输出 `3`

#### 题目三： ####

var promise = new Promise((resolve, reject) => {
        console.log(1)
    })
    promise.then(console.log(2))
    console.log(3)
    // 1
    // 2
    // 3

**解析：**

*  首先明确， `.then` 或者 `.catch` 的参数期望是函数，传入非函数则会发生（ `value => value` ）
 *  开始 `new Promise` ，执行构造函数同步代码，输出 `1`
 *  然后 `then()` 的参数是一个 `console.log(2)` （注意：并不是一个函数），是立即执行的，输出 `2`
 *  执行同步代码，输出 `3`

#### 题目四： ####

Promise.resolve(1)
      .then(2)
      .then(Promise.resolve(3))
      .then(console.log)
    // 1

**解析：**

*  `then(2)` 、 `then(Promise.resolve(3))` 发生了值穿透，直接执行最后一个 `then` ，输出 `1`

#### 题目五： ####

var promise = new Promise((resolve, reject) => {
        console.log(1)
        resolve()
        reject()
    })
    promise.then(()=>{
        console.log(2)
    }).catch(()=>{
        console.log(3)
    })
    console.log(4)
    // 1
    // 4
    // 2

**解析：**

*  开始 `new Promise` ，执行构造函数同步代码，输出 `1`
 *  再 `resolve()`， 将 `promise` 的状态改为了 `resolved` ，并且将 `resolve` 值保存下来，此处没有传值
 *  再 `reject()` ，此时 `promise` 的状态已经改为了 `resolved` ，不能再重新翻转（状态转变只能是pending —> resolved 或者 pending —> rejected，状态转变不可逆）
 *  跳出`promise`，往下执行，碰到 `promise.then` 这个微任务，将其加入微任务队列
 *  往下执行，碰到 `promise.catch` 这个微任务，此时 `promise` 的状态为 `resolved` （非 `rejected` ），忽略 `catch` 方法
 *  执行同步代码，输出 `4`
 *  此时宏任务执行完毕，开始检查微任务队列，执行 `promise.then` 微任务，输出 `2`

#### 题目六： ####

Promise.resolve(1)
      .then(res => {
        console.log(res);
        return 2;
      })
      .catch(err => {
        return 3;
      })
      .then(res => {
        console.log(res);
      });
    // 1
    // 2

**解析：**

*  首先 `resolve(1)`， 状态改为了 `resolved` ，并且将 `resolve` 值保存下来
 *  执行 `console.log(res)` 输出 `1`
 *  返回 `return 2` 实际上是包装成了 `resolve(2)`
 *  状态为 `resolved` ， `catch` 方法被忽略
 *  最后 `then` ，输出 `2`

### 2. 同步 + Promise + setTimeout ###

#### 题目一： ####

setTimeout(() => {
      console.log(1)
    })
    Promise.resolve().then(() => {
      console.log(2)
    })
    console.log(3)
    // 3
    // 2
    // 1

**解析：**

*  首先 `setTimout` 被放入宏任务队列
 *  再 `Promise.resolve().then` ， `then` 方法被放入微任务队列
 *  执行同步代码，输出 `3`
 *  此时宏任务执行完毕，开始检查微任务队列，执行 `then` 微任务，输出 `2`
 *  微任务队列执行完毕，检查执行一个宏任务
 *  发现 `setTimeout` 宏任务，执行输出 `1`

#### 题目二： ####

var promise = new Promise((resolve, reject) => {
      console.log(1)
      setTimeout(() => {
        console.log(2)
        resolve()
      }, 1000)
    })
    
    promise.then(() => {
      console.log(3)
    })
    promise.then(() => {
      console.log(4)
    })
    console.log(5)
    // 1
    // 5
    // 2
    // 3
    // 4

**解析：**

*  首先明确，当遇到 `promise.then` 时，如果当前的 `Promise` 还处于 `pending` 状态，我们并不能确定调用 `resolved` 还是 `rejected` ，只有等待 `promise` 的状态确定后，再做处理，所以我们需要把我们的两种情况的处理逻辑做成 `callback` 放入 `promise` 的回调数组内，当 `promise` 状态翻转为 `resolved` 时，才将之前的 `promise.then` 推入微任务队列
 *  开始， `Promise` 构造函数同步执行，输出 `1` ，执行 `setTimeout`
 *  将 `setTimeout` 加入到宏任务队列中
 *  然后，第一个 `promise.then` 放入 `promise` 的回调数组内
 *  第二个 `promise.then` 放入 `promise` 的回调数组内
 *  执行同步代码，输出 `5`
 *  检查微任务队列，为空
 *  检查宏任务队列，执行 `setTimeout` 宏任务，输入 `2` ，执行 `resolve` ， `promise` 状态翻转为 `resolved` ，将之前的 `promise.then` 推入微任务队列
 *  `setTimeout` 宏任务出队，检查微任务队列
 *  执行第一个微任务，输出 `3`
 *  执行第二个微任务，输出 `4`

### 回到开头 ###

现在看，本题就很简单了

**解析：**

*  首先执行同步代码，输出 `1 0`
 *  遇到 `setTimeout` ，定时 `500ms` 后执行，此时，将 `setTimeout` 交给异步线程，主线程继续执行下一步，异步线程执行 `setTimeout`
 *  主线程执行 `Promise.resolve().then` , `.then` 的参数不是函数，发生（ `value => value` ） ，输出 `3 1`
 *  主线程继续执行同步任务 `whlie` ，等待 `1000ms` ，在此期间，`setTimeout` 定时 `500ms` 完成，异步线程将 `setTimeout` 回调事件放入宏任务队列中
 *  继续执行下一步，输出 `4 1000`
 *  检查微任务队列，为空
 *  检查宏任务队列，执行 `setTimeout` 宏任务，输入 `2 1000`

### 总结 ###

*  `Promise` 构造函数是同步执行的， `then` 方法是异步执行的
 *  `.then` 或者 `.catch` 的参数期望是函数，传入非函数则会发生值透传
 *  `Promise`的状态一经改变就不能再改变，构造函数中的 `resolve` 或 `reject` 只有第一次执行有效，多次调用没有任何作用
 *  `.then`方法是能接收两个参数的，第一个是处理成功的函数，第二个是处理失败的函数，再某些时候你可以认为`catch`是`.then`第二个参数的简便写法
 *  当遇到 `promise.then` 时， 如果当前的 `Promise` 还处于 `pending` 状态，我们并不能确定调用 `resolved` 还是 `rejected` ，只有等待 `promise` 的状态确定后，再做处理，所以我们需要把我们的两种情况的处理逻辑做成 `callback` 放入 `promise` 的回调数组内，当 `promise` 状态翻转为 `resolved` 时，才将之前的 `promise.then` 推入微任务队列

来自：https://github.com/sisterAn/blog

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的支持