您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript的可视化学习之一:事件循环

时间:2020-08-06 11:25:58  来源:  作者:
「翻译」JavaScript的可视化学习之一:事件循环

事件循环的概览图。

请注意上面这张图,事件循环的那些事,将在这个图上缓缓展开。

事件循环(Event Loop),怎么说呢,每个JAVAscript开发者都必须要经过它的蹂躏。初次见面,你会觉得它令人迷惑难以理解。我是一个视觉型学习者,所以我尝试用视觉的方式来搞定它,没错,视觉的方式,就是那种低像素的gif图片 - 现在是9012年了,gif还走在像素化的世界里用格子画马里奥。

那么,什么是事件循环,我们又为什么要关注它呢?

JavaScript是以单线程的方式运行的:同一时间只能做一件事。通常情况下,这也没啥大不了的,但是假设现在要运行一个任务,这个任务要跑30秒......在任务运行的这30秒内,我们什么都干不了(JavaScript默认和UI渲染占用浏览器的主线程,当JavaScript在惬意的奔跑30秒时,UI渲染只能苦苦等待而被阻断,也就是我们见到的页面卡顿)。现在都什么年代了,一个卡顿、点击没响应的网站是吸引不了用户的。

幸运的是,浏览器给我们打开了一扇窗,它提供了一些JavaScript引擎本身没有的特性:Web API,包括`DOM API`,`setTimeout`,`HTTP requests`等等。这些可以帮助我们来创建异步的,不会被阻断的行为。


当我们调用一个函数时,函数会被压入堆栈。堆栈不是浏览器特有的东西,它是JavaScript引擎的一部分。堆栈,顾名思义就是一个栈,遵循着先进后出的原则(想象一下,一叠烙饼是怎么来的,又是怎么没的)。当这个函数返回时,它会被从栈里抛出去。

「翻译」JavaScript的可视化学习之一:事件循环

1、函数执行时,压入堆栈,执行完抛出堆栈。


上图的`respond`函数返回了一个`setTimeout`函数,`setTimeout`由`Web API`提供:它可以让任务延迟执行,而且不会阻碍主线程。箭头函数`() => { return 'Hey' }`作为回调函数,传递给`setTimeout`,然后会被添加到`Web API`中。同时,`setTimemout`和`respond`函数都被抛出了堆栈,而且他们都返回了自己的值。

「翻译」JavaScript的可视化学习之一:事件循环

2、浏览器提供setTimeout,Web API负责回调函数。


在`Web API`中,当第二个参数,`1000毫秒`被传递过去时,一个计时器就开始运行。此时这个回调函数不会马上被添加到堆栈中执行,它会被先添加到一个队列中。

「翻译」JavaScript的可视化学习之一:事件循环

3、计时器完成时,添加回调函数到回调函数队列。

这里是让人容易迷惑的地方:1000毫秒后,回调函数并不会被添加到堆栈,它只是被简单的添加到了一个队列中,然后,等待着被叫号。


现在到了我们期待已久的时刻,事件循环要开始它唯一的使命:连接队列和堆栈。如果堆栈是空的,所有以前被调用的函数已经返回并且从堆栈中抛出,那么把队列中的第一个添加到堆栈中。此时没有别的函数被调用,意味着当回调函数成为队列中的第一个时,堆栈是空的。

「翻译」JavaScript的可视化学习之一:事件循环

4、事件循环发现堆栈为空,添加队列第一项到堆栈中。


回调函数被添加到堆栈后,执行,然后返回,最后被抛出堆栈。

「翻译」JavaScript的可视化学习之一:事件循环

5、回调函数添加到堆栈,执行,返回,最终抛出堆栈。


纸上得来终觉浅,绝知此事要躬行。看看以下代码最终会输出什么:

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();

理解了没?让我们来快速看一下,这段代码在浏览器中运行时发生了什么:

「翻译」JavaScript的可视化学习之一:事件循环

执行流程

1. 调用`bar`,`bar`返回了一个`setTimeout`函数。

2. 传递给`setTimeout`的回调函数被添加到`Web API`中,同时`setTimeout`函数和`bar`返回并被抛出堆栈。

3. 计时器开始运行,同时`foo`被调用,输出`First`,`foo`返回(`undefined`)。`baz`被调用,回调函数被添加到队列中。

4. `baz`输出`Third`,`baz`返回,`baz`被抛出堆栈,事件循环发现堆栈是空的,就把回调函数添加到堆栈中。

5. 回调函数输出`Second`。


好了,希望现在你已经开始体会到事件循环的美妙。如果还有疑惑,不要担心,最重要的是理解错误发生、行为产生背后的根源,这样可以有效定位问题、快速搜索并最终在`StackOverflow`中找到真解。如果有任何问题,请随时联系我。

翻译来源:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif



Tags:JavaScript 可视化学习   点击:()  评论:()
声明:本站部分内容来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关评论
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
▌相关推荐
事件循环的概览图。请注意上面这张图,事件循环的那些事,将在这个图上缓缓展开。事件循环(Event Loop),怎么说呢,每个Javascript开发者都必须要经过它的蹂躏。初次见面,你会觉得它令...【详细内容】
2020-08-06   JavaScript 可视化学习  点击:(7)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条