关于 JavaScript 事件循环机制的理解（通俗易懂）

1. 接下来看下面的代码猜测下输出的结果：（先不要看答案）

setTimeout(() => {
  console.log(1)
},0)

new Promise((resolve,reject) => {
  console.log(3)
  resolve(2)
  console.log(4)
})
.then((res) => {
  console.log(res)
})

console.log(5)

function func() {
  console.log(6)

  setTimeout(() => {
    console.log(7)
  }, 1000)

  new Promise((resolve,reject) => {
    resolve(9)
    console.log(8)
  })
  .then((res) => {
    console.log(res)
  })
}

func()

console.log(10)

2. 什么是事件循环机制

        其实就是 JS 对于不同的代码有不同的执行触发时间和规律，其实 JS 是很友好的，他的执行就好像人在日常生活中的经历很相似，比如你在玩电脑，你想下载一个游戏，而在这个游戏的下载过程中你会一直坐在这等着吗？

        显然不会（前提你是个正常人啊，你要是说你不正常那就另说），你可能会边玩手机边等，或者先去玩别的游戏，总之你会继续去做别的可以同步进行的操作，这也就是 JS 进行的操作，所以当它遇到需要等待的操作时，它也不会傻乎乎的在那里等待，而是去同步的往下执行，当然如果你给了它必须等待的命令的话，它也会毫无怨言的执行等待，也就是术语常说的阻塞操作；

        所以它就把正常能执行的操作放在一个队列 A 里，一步一步顺序去执行

        然后把需要等待的操作放在另一个队列 B 里

        那么问题来了，既然都是等待的操作，就好像家里也得有老大老二吧，总得有个大小王，那么常见的 promise.then 和 catch 等 就是大王，而 setTimeout 和 setInterval 的定时就是小王，所以 同级别的 promise.then 和 catch 就会先于 setTimeout 和 setInterval 执行；

        一定要注意是 同级别的 

        那么什么是同级别呢，你可以这样去理解，这个操作在哪里执行，当它在最外层执行时就是第一级别，以此类推，每被 { } 包裹一层就低一级别

        所以是同级别相比，不同级别没有可比性！低级别操作永远晚于高级别操作执行；

3. 最后的结果

3  4  5  6  8  10  2  9  1  7