可视化的JavaScript:事件循环

首先,事件循环是什么,为什么要理解它?

JavaScript 是单线程的:一次只能运行一个任务。通常这没什么大不了的,但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中,我们要等待30秒,然后才能执行接下来要做的事情(JavaScript 默认运行在浏览器的主线程上,所以整个UI都卡住了)。

幸运的是,浏览器提供了 JavaScript 引擎本身没有提供的一些特性:Web API。这包括 DOM APIsetTimeoutHTTP请求等等。这些 API 可以帮助我们创建一些异步的、非阻塞的行为。

当我们调用一个函数时,它被添加到调用堆栈中。调用堆栈是 JavaScript 引擎的一部分,这不是浏览器特有的。堆栈里面的顺序是先进后出,当函数返回一个值时,它会从堆栈中弹出。

1.gif

response函数返回一个setTimeout函数。setTimeout是由Web API提供的:它允许我们在不阻塞主线程的情况下延迟任务。我们传递给setTimeout函数的回调函数()=> {return 'Hey'}被添加到Web API中。与此同时,setTimeout函数和response函数从堆栈中弹出,它们都返回了它们的值。

2.gif

Web API中,计时器的运行时间与我们传递给它的第二个参数1000ms一样长。 回调不会立即添加到调用堆栈中,而是会传递到队列中。

3.gif

这可能是一个令人困惑的部分:它并不意味着在1000ms之后将回调函数添加到调用堆栈中,它只是在1000ms后添加到队列中。在队列,函数必须等待轮到它,才会执行。

现在,我们一直在等待事件循环完成其惟一的任务:将队列与调用堆栈连接起来。如果调用堆栈为空,那么如果之前调用的所有函数都返回了它们的值并已从堆栈中弹出,则队列中的第一项将添加到调用堆栈中。在本例中,没有调用其他函数,这意味着在回调函数成为队列中的第一项时,调用堆栈为空。

4.gif

回调函数被添加到调用堆栈中,被调用,并返回一个值,然后从堆栈中弹出。

5.gif

通过动画演示看起来是很有趣的,但还是需要重复多看几遍,才能更好理解它们之间的关系。现在来考验一下,如下代码所示,请说出执行的结果:

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

bar();
foo();
baz();

明白了吗?让我们快速查看一下在浏览器中运行这段代码时发生了什么

6.gif

  1. 调用函数barbar返回setTimeout函数。

  2. 我们传递给setTimeout的回调被添加到Web APIsetTimeout函数和bar从调用栈中弹出。

  3. 计时器运行,同时函数foo被调用并打印 Firstfoo返回,接着调用函数baz,并将回调添加到队列中。

  4. 函数baz打印Third,事件循环看到baz返回后,调用栈为空,然后将处理队列中的回调添加到调用栈中。

  5. 回调函数打印 Second

希望本文对你在事件循环上的理解有一定的帮助,咱们下篇见。

英文原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

为了保证的可读性,本文采用意译而非直译。

Image placeholder
前端答疑
未设置
  28人点赞

没有讨论,发表一下自己的看法吧

推荐文章
可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

可视化的JavaScript:作用域(链)

首先,来看看下面的代码:constname="Lydia" constage=21 constcity="SanFrancisco" functiongetPersonInfo(){ constn

浏览器中的JavaScript:什么是文档对象模型?什么是DOM操作?

JavaScript并没有那么糟糕。作为运行在浏览器中的脚本语言,它对于网页操作非常有用。在本文中,我们将看到可以用哪些手段来修改HTML文档和交互。什么是文档对象模型?文档对象模型是在浏览器中一切的

智能数据可视化的5个步骤

如今,许多企业正在利用模型、数据分析、数据可视化和仪表板等措施实现数据驱动。例如商业领袖注重提升客户体验,技术领导者注重分析速度和网站指标,应用程序团队在其应用程序中嵌入分析程序等等。这意味着更多的开

打造高逼格、可视化的Docker容器监控系统平台

关于Docker技术的文章之前也断断续续写了几篇:Docker容器系列文章|Docker技术入门(一)Docker容器系列文章|Docker技术入门(二)Docker容器系列文章|这20个Docker

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

如何使你的JavaScript代码简单易读

解决同一问题的方法有很多,但有些解决方法很复杂,甚至有些是荒谬的。在这篇文章中,我想谈谈解决同样问题的好方法和坏方法。让我们先从怎样删除数组中的重复项这个简单问题开始。复杂-使用forEach删除重复

14个你可能不知道的JavaScript调试技巧

以更快的速度和更高的效率来调试JavaScript熟悉工具可以让工具在工作中发挥出更大的作用。尽管江湖传言JavaScript很难调试,但如果你掌握了几个技巧,就能用很少的时间来解决错误和bug.文中

可视化编程是否真的没有未来?程序员:它有“七宗罪”

今天想聊聊可视化编程(visual-programming)的未来发展,喂喂,咱们这儿还没开始,各位大佬先别急着走啊您……确实,可视化这个概念跟任何技术并称,都是技术前沿、下一个风口、万亿市场的代名词

那个“炫酷狂拽”的数据可视化利器AntV 11.22版全新发布啦

导读AntV是一个数据可视化项目,也是一个团队,蚂蚁金服数据可视化团队,一群有爱有梦的人,怀揣「让人们在数据世界里获得视觉化思考能力」的梦想前行,希望成就智能时代全球领先的数据可视化解决方案,满足与日

2019值得关注的数据可视化工具TOP5

 数据可视化在数据分析过程中的扮演着非常重要的角色。对于数据科学家或数据分析师来说,以更直观、便于查看、甚至更吸引人的视觉效果来呈现数据是很重要的。数据可视化是一个有效的市场工具,通过这种方式,从海量

基于Pandas+ECharts的金融大数据可视化实现方案

前言最近无意中看到一篇文章,介绍的是在IPythonNotebook里实现ECharts的可视化效果。我个人对ECharts一直是推崇有加,是baidu发布的开源项目中我比较喜欢的一个,绝对是良心之作

分享一个可视化开发vue框架下的各类ui的web在线表单设计布局器

新手发帖,第一次不小心刷新了一下就没了本人刚入门vue,偶然间发现这款布局器挺好的,可视化开发element所以分享给大家网站地址:http://lowcode.magicalcoder.c...嵌入

Python可视化 | Seaborn5分钟入门(一)——kdeplot和distplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(二)——barplot&countplot&pointplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(七)——pairplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(三)——boxplot和violinplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(六)——heatmap热力图

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

Python可视化 | Seaborn5分钟入门(五)——lmplot

微信公众号:「Python读财」如有问题或建议,请公众号留言Seaborn是基于matplotlib的Python可视化库。它提供了一个高级界面来绘制有吸引力的统计图形。Seaborn其实是在matp

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript