同步、异步、回调执行顺序

先思考一下代码输出什么

let a = new Promise(
  function(resolve, reject) {
    
    
    console.log(1)
    setTimeout(() => console.log(2), 0)
    console.log(3)
    console.log(4)
    resolve(true)
  }
)
a.then(v => {
    
    
  console.log(8)
})
let b = new Promise(
  function() {
    
    
    console.log(5)
    setTimeout(() => console.log(6), 0)
  }
)
console.log(7)

利用公式：同步 => 异步 => 回调
1、看同步代码：a变量是一个Promise，我们知道Promise是异步的，是指他的then()和catch()方法，Promise本身还是同步的，所以这里先执行a变量内部的Promise同步代码。（同步优先）

console.log(1)
setTimeout(() => console.log(2), 0) //回调
console.log(3)
console.log(4)

2、Promise内部有4个console，第二个是一个setTimeout回调（回调垫底）。所以这里先输出1，3，4回调的方法丢到消息队列中排队等着。

3、接着执行resolve(true)，进入then()，then是异步，下面还有同步没执行完呢，所以then也滚去消息队列排队等候。（异步靠边）

4、b变量也是一个Promise，和a一样，执行内部的同步代码，输出5，setTimeout滚去消息队列排队等候。

5、最下面同步输出7。

6、同步的代码执行完了，JavaScript就跑去消息队列呼叫异步的代码：异步，出来执行了。这里只有一个异步then，所以输出8。

7、异步也over，轮到回调的孩子们：回调，出来执行了。这里有2个回调在排队，他们的时间都设置为0，所以不受时间影响，只跟排队先后顺序有关。则先输出a里面的回调2，最后输出b里面的回调6。

8、最终输出结果就是：1、3、4、5、7、8、2、6。

我们还可以稍微做一点修改，把a里面Promise的 setTimeout(() => console.log(2), 0)改成 setTimeout(() => console.log(2), 2)，对，时间改成了2ms，为什么不改成1试试呢？1ms的话，浏览器都还没有反应过来呢。你改成大于或等于2的数字就能看到2个setTimeout的输出顺序发生了变化。所以回调函数正常情况下是在消息队列顺序执行的，但是使用setTimeout的时候，还需要注意时间的大小也会改变它的顺序。

口诀不一定是万能的，只能作为一个辅助，更重要的还是要理解JavaScript的运行机制，才能对代码执行顺序有清晰的路线。

还有async/await等其他异步的方案，不管是哪种异步，基本都适用这个口诀，对于新手来说，可以快速读懂面试官出的js笔试题目。以后再也不用害怕做笔试题啦。

特殊情况下不适应口诀的也很正常，JavaScript博大精深，不是一句话就能概括出来的。

最后，在跟着我念一遍口诀：同步 => 异步 => 回调

转自：https://mp.weixin.qq.com/s/VIoUDWq9212WsXweyfH5ZA

同步、异步、回调执行顺序

猜你喜欢