事件循环（Event Loop）

1.什么是事件循环？

JavaScript为单线程执行的，所以是从上到下依次执行，js分为两个任务，宏任务和微任务

首先执行宏任务(第一次就是执行所有的同步代码)，再执行所有的微任务，执行完毕之后再次执行

宏任务，执行完毕再次执行所有的微任务，也就是：

宏任务 --> 微任务  -->  宏任务 -->  微任务

2.什么是宏任务，微任务？

宏任务：

script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.

微任务：

process.nextTick, Promise.then, Object.observer, MutationObserver.

3.案例深入解读

 setTimeout(function(){
    console.log(1)
 },0)

 new Promise((resolve,reject)=>{
     console.log(2)
     resolve(3)
     setTimeout(function(){
        console.log(5)
        promise.resolve
     },0)
 }).then((val)=>{
     console.log(val) })
 console.log(4)

解读：

首先执行宏任务(同步代码)  ：console.log(2)  console.log(4)

再执行所有的微任务  console.log(3)

再一次从上到下执行所有的微任务：console.log(1)   console.log(5)

所以正确答案是  2 4  3 1 5

我们再加大难度

console.log(‘start‘)
setTimeout(() => {
  console.log(‘setTimeout 1‘)
  Promise.resolve().then(() => {
    console.log(‘promise 3‘)
  }).then(() => {
    console.log(‘promise 4‘)
  }).then(() => {
    setTimeout(() => {
      console.log(‘setTimeout 2‘)
      Promise.resolve().then(() => {
        console.log(‘promise 5‘)
      }).then(() => {
        console.log(‘promise 6‘)
      })
    }, 0)
  })
}, 0)
Promise.resolve().then(() => {
  console.log(‘promise 1‘)
}).then(() => {
  console.log(‘promise 2‘)
})

解读：

我们先执行同步代码： start

微任务：promise 1 ,  promise 2

宏任务： setTimeout 1

微任务：promise 3, promise 4

宏任务：setTimeout 2 ,

微任务：promise 5,promise 6

正确答案

start promise 1 promise 2 setTimeout 1 promise 3 promise 4 setTimeout 2 promise 5 promise 6

原文地址：https://www.cnblogs.com/guan-shan/p/10127853.html