一道代码题彻底搞懂js事件循环

请先别往下划走，先思考下这倒代码题的输出结果

console.log('script start')

for (var i = 1; i <= 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, i * 1000)
  console.log(i)
}

new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('then1')
})

setTimeout(function () {
  console.log('timeout2')
  new Promise(function (resolve) {
    console.log('timeout2_promise')
    resolve()
  }).then(function () {
    console.log('timeout2_then')
  })
}, 1000)

console.log('script end')

思考好了吗？
接下来对比一下你的答案吧

如果你的答案和控制台输入的一致，那说明你毕业了，后面的可以不用再下看了
但如果答案不对的话，那下面的还是值得一看的。

---

首先，什么js单线程、事件循环的概念这些八股文的我这里就不说了，直接敲重点
js代码执行的过程：
1、先同步，后异步
2、异步任务包括宏任务（script、setTimeout、setInterval为主）和微任务（promise为主）
3、异步任务执行过程是一个个的循环。微宏、微宏、微宏…，直到没有异步任务为止

回头看上面的代码
第一，先同步
这里只需记住一点，new Promise（function()）里面的function属于同步任务，其他的没啥问题，
依次输出：

第二，后异步
来看第一个微宏循环

为什么这样输出呢？
微宏，那当然是先微再宏
微任务：then1属于，输出。（这里可能会有疑问，为什么下面的timeout2_promise不在这里输出，因为他是嵌套在宏任务setTimeout里面的，所以不属于第一层的微宏循环）。至此没其他微任务了
宏任务：先输出上面setTimeout里的第一秒的6，再输出下面的setTimeout的timeout2以及promise里的timeout2_promise（如果这里有疑问为什么会输出timeout2_promise的，还记得上面说的new Promise（function()）里面的function属于同步任务吗）

至此第一个微宏任务完成

接着再来看第二个微宏循环

最后再输出第一个微宏任务里的setTmeout第2、3、4、5秒的6
至此全部代码就输出完了

回头再看上面的输出结果，再结合上面说的这三句话，进行合理的拆分，就很明朗了
1、先同步，后异步
2、异步任务包括宏任务（script、setTimeout、setInterval为主）和微任务（promise为主）
3、异步任务执行过程是一个个的循环。微宏、微宏、微宏…，直到没有异步任务为止