js的异步方法：promise与定时器相遇，碰到的火花

前言：
        我们在项目中长使用的异步方法 promise与定时器 在一起后，他们的顺序是什么样呢？这里来说一说。

案例1：

console.log('异步打印顺序：');

  console.log(1);
  setTimeout(()=>{
    console.log(2);
  },2000)
  setTimeout(()=>{
    console.log(3);
  },0)
  Promise.resolve().then(()=>{
    console.log(4); //微任务
  })
  Promise.resolve().then(()=>{
    console.log(5); //微任务
  },6000)
  console.log(6);

结果是：

1、先执行正常的js，比如1->6

2、再执行 promise的then，比如 4->5

3、最后再执行 定时器，根据秒数来控制 ，比如 3->2

案例2：

console.log('异步打印顺序：');

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

结果是：

1、先执行 promise的 resolve

1、先执行正常的js

2、再执行 promise的then

3、最后再执行 定时器，

总结：执行顺序：

1、同步先执行

promise的 resolve也属于同步，跟在 promise外面效果是一致的

2、同步结束以后在执行异步里面的微任务

比如 promise的 then

3、最后是宏任务 定时器

为什么异步里面是先执行宏任务，但是实际打印的情况，却是先打印 微任务，在打印宏任务？

官方解释：

先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,

1、当所有同步代码执行完毕后,

2、再将异步微任务从队列中调入主线程执行,

3、微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。

简单来说：

因为宏任务试下一个时间循环开始的宏任务，而微任务是这次事件循环就执行的微任务，他们之间隔了一个dom渲染，所以造成了微任务比宏任务更快执行的错觉

宏任务和微任务

宏任务：当前调用栈中执行的代码成为宏任务。（主代码快，定时器等等）。

微任务：当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。（promise.then ，promise.catch 等等）。