JS中的Event-loop(事件循环)

Event-loop 事件循环

首先来看一段代码

function fn(){
  console.log('1')
  setTimeout(() => {
    console.log('2')
  }, 1000)
  var aa = 0
  for (let i = 0; i < 9999999999; i++) {
    aa = i
  }
  if (aa = 9999999998) {
    console.log('3')
  }
}
fn()

运行结果是先输出1，然后大概好几秒（大于一秒）以后依次输出3，2。

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

可是上边这里明明写了定时器一秒后输出字符串2啊，为什么过了好久才输出呢？这里就会引发思考，js到底是怎么执行的

---

什么是JS事件循环

先来一张经典图
[图片上传失败...(image-7d54c3-1544949316728)]

我们都知道JS是单线程的，所以在它的stack（执行栈）里面任务是排队执行的，这里我们在回头看开始的代码

function fn(){
  console.log('1')
  setTimeout(() => {
    console.log('2')
  }, 1000)
  var aa = 0
  for (let i = 0; i < 9999999999; i++) {
    aa = i
  }
  if (aa = 9999999998) {
    console.log('3')
  }
}
fn()

当调用fn()的时候，就会把fn这个函数放到stack中去。执行步骤分以下几步

第一步：执行console.log('1')

第二步：执行到setTimeout 的时候，因为我们都知道setTimeout是异步操作，这里不可能说我js停下来等你1秒，这样页面就卡死在那里了。

这里在回过头来看上面那Event-loop图
[图片上传失败...(image-b6bb7a-1544949316728)]

event-loop.jpg

event-loop2.png


注：js是单线程，但js是运行在浏览器中的，浏览器是多线程的，这一点要搞清楚

当我们运行到setTimeout这里时，为了不阻塞页面，浏览器会在开一个线程来处理异步的操作，也就是上图红框框部分。然后js会略过setTimeout，继续执行下面for循环的代码。
当一秒钟之后setTimeout执行完毕，就会将结果放如到callback queue（回调队列中等待调用），等待stack中的任务执行完毕后来调用它，所以一开始fn()函数的执行结果是1,3,2,、不是1,2,3.就是因为异步的操作被放在了callback queue中，等待stack中的执行完才会去找它。

现在我们搞明白了为什么结果是1,3,2 而不是1,2,3,之后还有一个问题就是为什么setTimeout明明写的是1秒之后在控制台打印出'2'来，为什么实际体验中要好几秒之后呢。原因就在以下这部分代码中

 for (let i = 0; i < 9999999999; i++) {
    aa = i
  }
  if (aa = 9999999998) {
    console.log('3')
  }

原因就是这部分for循环的代码执行过程超过了1秒。而这个for循环是放在stack里面的。它执行不完就不会去callback queue里面找东西，所以我们看到的最终结果就是

先打印'1'出来
然后等几秒后(这个随电脑配置不同，时间长短不一样)，在打印出'2'
最后才会打印出'3'