浏览器端异步介绍
在前端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)
一段代码 & 执行代码的时机
至于代码是怎么抓住时机的,我不清楚诶........
