惊艳!可视化的 js:动态图演示 - 事件循环 Event Loop
原文地址:https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
原文作者:Lydia Hallie
译者:夜尽天明
译者博客地址:https://github.com/biaochenxuying/blog/issues/65
前言
对于事件循环,这是每个 JavaScript 开发人员必然会遇到或者需要理解的内容之一。
但是对于初级开发者来说,理解起来可能有些混乱。
因为我是一个视觉学习者,所以我通过低分辨率 gif 图的可视化方式来帮助你理解它。
事件循环
但是首先,事件循环是什么,为什么要关心呢?
JavaScript 是 单线程的:一次只能运行一个任务。
通常,这没什么大不了的,但是现在想象你正在运行一个耗时 30 秒的任务。
在此任务中,我们等待 30 秒才能进行其他任何操作(默认情况下,JavaScript 在浏览器的主线程上运行,因此整个用户界面都停滞了)???? 。
都到 2020 年了,没有人想停留在一个速度慢,交互反应迟钝的网站。
幸运的是,浏览器为我们提供了JavaScript 引擎本身不提供的一些功能:Web API。
这包括 DOM API,setTimeout
HTTP 请求等,这可以帮助我们创建一些异步的,非阻塞的行为。
当我们调用一个函数时,它会被添加到称为 调用栈 的数据结构中。
调用栈是 JS 引擎的一部分,这不是特定于浏览器的。
它是一个调用栈,这意味着它是 先进先出 的(例如一堆煎饼)。
当一个函数返回一个值时,它会从调用栈中弹出 ????。
该 respond
函数返回一个 setTimeout
函数。
在 setTimeout
由 Web API 提供给我们:它让我们拖延的任务,而不会阻塞主线程。
我们传递给该 setTimeout
函数的回调函数,箭头函数 () => { return "Hey" }
已添加到 Web API。
同时,该 setTimeout
函数和 response 函数从调用栈中弹出,它们都返回了它们的值!
在 Web API中,计时器的运行时间与我们传递给它的第二个参数 1000ms 一样长。回调不会立即添加到调用栈中,而是会传递给称为队列的东西。
这可能是一个令人困惑的部分:这并不意味着在 1000 毫秒后将回调函数添加到调用栈中(从而返回一个值)!它只是在 1000 毫秒后添加到 队列中。但这是一个队列,该功能必须等待轮到它!
接下为是我们一直在等待的重点内容……
让事件循环执行其唯一的任务了:将队列与调用栈连接起来!如果调用栈为 空,那么如果所有先前调用的函数都返回了它们的值并已从堆栈中弹出,则队列中的 第一项 将添加到调用栈中,在这种情况下,没有其他函数被调用,这意味着当回调函数成为队列中的第一项时,调用栈为空。
回调被添加到调用栈中,被调用,并返回一个值,并从调用栈中弹出。
例子
阅读一篇文章很有趣,但是通过反复地实际操作,你会对此理解得更深。
如果运行以下 js,请想一下控制台会输出什么内容:
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");bar();
foo();
baz();
想出答案了吗?
让我们快速看一下在浏览器中运行此代码时发生的过程:
我们调用
bar
,bar
返回一个setTimeout
函数。我们传递给的回调
setTimeout
被添加到 Web API,该setTimeout
函数中,并bar
从调用堆栈中弹出。计时器运行,同时
foo
调用并记录First
,foo
返回(未定义),baz
被调用,并将回调添加到队列中。baz
输出Third
,事件循环看到baz
返回后调用栈为空,然后将回调添加到调用栈。回调再打印出
Second
。
希望这会使你对事件循环的理解更加清析!最重要的是 了解某些错误 / 行为可能从何而来。
当遇到不明白的地方时,也能 高效地 在 Google 上搜索正确的关键字 ,并能搜索到正确的答案 ???????? 。
最后
外国友人技术博客的语言表达的方式和风格、与国人的还是有很大差别的啊。
姐妹篇:惊艳!可视化的 js:动态图演示 Promises & Async/Await 的过程!
翻译了两篇文章,还是蛮有趣的 ????,瞬间感觉自己的英文水平高达 8 级了啦 (白日梦 ????)。
推荐阅读:
通过10 个实例小练习,快速入门熟练 Vue3 核心新特性
2. 重磅:GitHub 上 100K+ Star 的前端面试开源项目汇总(进大厂必备)
强烈推荐: GitHub 上 170K+ Star 的前端学习的数据结构与算法项目
一张图理清Vue 3.0的响应式系统,实现精简版的响应式系统
黑学习方式:GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目
支持一下下????
惊艳!可视化的 js:动态图演示 - 事件循环 Event Loop相关推荐
- 面试率 90% 的JS事件循环Event Loop,看这篇就够了!! !
面试率 90% 的JS事件循环Event Loop,看这篇就够了!! ! 事件循环(Event Loop)大家应该并不陌生,它是前端极其重要的基础知识.在平时的讨论或者面试中也是一个非常高频的话题. ...
- JS事件循环 Event Loop
前言 刚学前端的时候一直听别人说 JS 是单线程.单线程.单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的. 那么什么是线程?为什么JS是单线程的? 1. 进程和线程 进程和线程的主 ...
- 同步异步、JS执行机制、事件循环
文章目录 单线程 同步 异步 同步任务 异步任务 JS执行机制 异步进程处理 事件循环-event loop(这里主要是说浏览器事件循环) 单线程 JS的一大特点就是单线程,也就是同一时间内只能做一件 ...
- 深入学习JS:任务队列和事件循环
目录 一.问题 二.任务队列与事件循环 2.1 同步任务与异步任务 2.2 任务队列 2.3 事件循环(event loop) 三.解决 3.1 解决同时输出 3.2 解决全输出10问题 一.问题 在 ...
- html把一张图片动态的代码,原神:4张动态图演示168皮肤琴的实机效果,三种玩家可入手...
原神这款游戏凭借着"细腻的角色设计""有趣的剧情路线"迅速走火,但是玩久了的老玩家很容易发现这款游戏的弊端,真的是太缺核心玩法了.本来原神的核心玩法应该是探索新 ...
- jsp循环输出表格_「翻译」JS可视化学习之七:Promise、事件循环和异步2
喜欢排队吧,它能保护你的时间和精力 - 排队纪律维护员Event Loop Promise和事件循环概览图 请注意上面这张图,Promise和事件循环的那些事,将在这个图上缓缓展开. 微任务和(宏)任 ...
- JS 常见面试题 - 事件循环机制
一.浏览器JS异步执行的原理 一般常说js是一门单线程语言,那为什么可以异步执行且不发生阻塞呢? 常说的JS是单线程语言,是因为执行JS的引擎是单线程的,而浏览器本身是多线程的 浏览器主要含有: js ...
- 数据可视化: matplotlib绘制动态图及3维动画
动画可以有趣地展示某种现象.相比于静态图表,人们更容易被动画和交互式的图表所吸引.在描绘时间序列数据时,动画更有意义,例如多年来股票价格的波动,过去十年气候的季节性变化和和趋势,因为我们可以看到特定参 ...
- 13 款惊艳的 Node.js 框架——第1部分
2019独角兽企业重金招聘Python工程师标准>>> [编者按]本文作者为 Peter Wayner,主要介绍13款至精至简的 Node.js 框架,帮助你简化高速网站.丰富 AP ...
最新文章
- 你没听说过的Go语言惊人优点
- 乔布斯当年是这样面试我的,你能挺到哪一步?
- hibernate学习(4)
- CSDN在文章头部添加目录
- boost::units::unscale相关的测试程序
- SAP CDS view自学教程之十:SAP CDS view扩展性(Extensibility)实现原理
- verilog正弦电压PWM波产生
- 服务提供者和服务消费者
- 华三交换机路由器图标_弱电箱网口不够用,用华三8口千兆交换机搞定
- 万网域名注册查询接口(API)的说明
- zabbix详解(十六)——zabbix agent自动注册实战
- windows server 2008下载及序列号
- Java实现动态切换IP的方法(一)
- 华数机器人旋转编程_华数机器人离线编程软件简介与InteRobot2018 新增功能
- UESTC 1634 去年春恨却来时,落花人独立,微雨燕双飞
- goodFeaturesToTrack——Shi-Tomasi角点检测
- java生成eml_用Java创建一个.eml(email)文件
- mysqlin查询的java写法_[转载]常用的shell脚本
- [NAS] Synology (群晖) DSM7.0 使用自定义供应商DDNS
- html怎么把背景换成相片,怎么给照片换背景 图片后期处理把阴沉天空背景换成云彩背景...