JavaScript Event Loop

浏览器端异步介绍

在前端Web开发中,异步操作其实有挺多的.
比如按钮事件,AJAX请求等.

由于JavaScript本质上是个单线程的.所以,它的异步执行都是依赖于一个叫事件循环的东西.Event Loop.

至于事件循环是神马?我个人是这么理解的.

• JavaScript是个单线程语言.
• 有一些代码是非常符合直觉线性的从上到下执行的.

比如:

var a = 0
let b = 1
const c = 2

• 而另外的一些代码,不会因为时间的流逝而去执行.
  • 一些注册了点击按钮事件的方法,但我从来不点那个按钮.
  • 有成功和失败回调函数的方法,状态成功了,失败的那个回调函数就不会执行;而状态成功了,失败回调的那个函数就不会执行.
  • 但不论如何,它们和var a = 0;let b = 1;const c = 2; 不一样.它们不一定会执行.有可能这段代码写了但永远都不会去执行.

一段js代码

const a = 0
let b = 1
var c = 2

window.onload = function() {
    document.getElementById('btn').onclick = function() {
    console.log(`我是按钮点击事件`)
    }
}

$.get('http://localhost/data/users/1',function(data){
    console.log(data)
})

一些代码线性执行，一些代码等待时机.jpg

对于上述代码:

• 在执行到前三行时,是正常的代码,线程就吭哧吭哧的去执行它们.
• 在第四行window.onload 的时候,线程发现,这是不是一个需要即时执行的代码,于是就把这代码丢到了Event Loop
• 在onload里面的 onclick 是属于用于触发的代码段,更加不是即时执行的代码.仍然是丢到Event Loop.
• $.get(前半部分,请求发送是即时的,于是请求很自然的单线程吭哧吭哧的发出去的,但是后半部分,由于是一个callback,于是又丢到事件循环,它又不能即时执行,鬼知道请求响应什么时候回来呢?

所以,在一串非常简单的代码中,就有3个部分都被丢进了事件循环.其中两个是event(onload & onclick)触发的callback,另外一个是网络异步请求触发的callback.

所以在这里得出了,一些有能执行,有可能不执行的callback,一般就丢到 Event Loop了

那这三个可能执行可能不执行的代码,如何是执行的话.那它们何时执行呢?

当这三段代码丢到了 Event Loop 中去了之后,它们并不是死水一滩.它们在等待执行它们的时机.

• 对于 onload 来说,当浏览器window加载完毕之后,它会在事件循环中看看,里面有没有之前注册需要在 onload 时机执行的代码?发现有,就去执行了.
• 对于 onclick 来说,当按钮被点击的时候,也会去 Evnet Loop 去看看,有没有给我绑定一个函数去响应这个事件?发现有,于是就去执行这个函数
• 对于 $.get来说,等它异步网络数据回来之后,会去Event Loop 里找,看有没有注册回调函数.发现有,于是就执行了.

可以简单的把 Event Loop 理解成一个存放在未来某个时机里可能会执行的代码容器.

时机到了,他们就执行,时机一直不到,那么就静静的等待时机.时机一直不来(按钮我就不点)就被判了无期徒刑,永远都没办法翻身.

总结
Event Loop 说简单点

• 一个存放callback的容器.
• 在容器里的callback一直在等待执行时机
  • 可能是网路请求数据回来了(ajax)
  • 可能是浏览器生命周期(onload)
  • 可能是用户事件(onclick)

一段代码 & 执行代码的时机

至于代码是怎么抓住时机的,我不清楚诶........