js中的宏任务和微任务

首先我们要先知道一个事情 , js是单线程的 , 也就是说js干活的时候只有一个人

就像我们人一样每天都有很多的任务 , 比如 做饭 上班 打卡 修电灯泡… , 这一堆的任务压在我们身上我们也会有主次之分 , 比如 先打卡 再上班

js也是一样 , 它有一个任务队列 , 同一时间只能干一件事情

任务执行的顺序 : 同步任务 > 微任务 > 宏任务

• 顺序 : 先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
• micro-task(微任务)：Promises, Object.observe, MutationObserver
• macro-task(宏任务)：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

场景一 : 有同步任务 微任务 和 宏任务

<script>
  setTimeout(()=>{
    console.log("定时器")
  },0)
  
  new Promise(resolve=>{
    console.log("Promise")
    resolve()
  }).then(()=>{
    console.log("then")
  })
  
  console.log("这是同步任务")
  /**
   * 输出结果 :
   *    Promise
   *    这是同步任务
   *    then
   *    定时器
  */
</script>

场景二 : 宏任务 内部还有 微任务

<script>
  setTimeout(()=>{
    console.log("定时器")
    new Promise(resolve=>{
      console.log("定时器 Promise")
      resolve()
    }).then(()=>{
      console.log("定时器 then")
    })
  },0)
  new Promise(resolve=>{
    console.log("Promise")
    resolve()
  }).then(()=>{
    console.log("then")
  })
  console.log("这是同步任务")
  /**
   * 输出结果 :
   *    Promise
   *    这是同步任务
   *    then
   *    定时器
   *    定时器 Promise
   *    定时器 then
  */
</script>

场景三 : 任务就是一个一个执行 , 不要被相同的所时间误解

<script>
  let i = 0;
  setTimeout(()=>{
    console.log(++i); // 1
  },1000)
  setTimeout(()=>{
    console.log(++i); // 2
  },1000)
</script>