Event-loop事宜轮回

2019年8月31日 197次阅读 来源: Apinkpig

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事宜轮回

先来一张典范图
《Event-loop事宜轮回》

我们都晓得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图
《Event-loop事宜轮回》

注：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′

    原文作者：Apinkpig
    原文地址: https://segmentfault.com/a/1190000018477531
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞