js【详解】event loop(事件循环/事件轮询)

event loop 是异步回调的实现原理

js 代码的执行过程

  • 从前到后,一行一行执行
  • 如果某一行执行报错,则停止下面代码的执行
  • 先把同步代码执行完,再执行异步

event loop 图解

以下方代码为例:

在这里插入图片描述

第1步 将第 1 行代码放入调用栈

将要执行第1行代码放入调用栈(call stack)中

在这里插入图片描述

第2步 执行第 1 行代码,清空调用栈

执行第1行代码,在浏览器中打印 Hi,并清空调用栈
在这里插入图片描述
在这里插入图片描述

第3步 将第 3 行代码放入调用栈

在这里插入图片描述

第4步 执行第 3 行代码,设置定时器,清空调用栈

执行第3行代码,发现是一个定时任务,于是在 Web APIs 中设置一个回调函数为 cb 1 的定时器,清空调用栈
在这里插入图片描述

第5步 将第 7 行代码放入调用栈

在这里插入图片描述

第6步 执行第 7 行代码,清空调用栈,开始事件轮询

执行第7行代码,在浏览器中打印 Bye,并清空调用栈
在这里插入图片描述
此时同步代码已执行完,开始事件轮询(即不断询问回调队列中是否存在可执行代码)
在这里插入图片描述
事件轮询会一直进行,直到整个js代码不再运行(如页面被销毁)。

第7步 将定时器的回调函数放入回调队列

本例中,第3行代码设置的定时器是 5 秒,则从第4步设置定时器开始记时,5秒后,将 Web APIS 中的定时器的回调函数放入回调队列(Callback Queue)中

在这里插入图片描述

第8步 事件轮询将定时器的回调函数放入调用栈

定时器的回调函数放入回调队列的那一刻,就会被事件轮询到(若回调队列已有多个回调函数,则会按先进先出的原则依次放入调用栈),并放入调用栈
在这里插入图片描述

第9步 将第 4 行代码放入调用栈

在这里插入图片描述

第10步 执行第 4 行代码,移除调用栈中的第 4 行代码

执行第4行代码,在浏览器中打印 cb1,将第4行代码从调用栈中移除
在这里插入图片描述
在这里插入图片描述

第11步 清空调用栈,全部代码执行完毕

因回调函数 cb1内的代码已执行完毕,函数cb1 也被移出调用栈

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/271867.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt初识 - 编写Hello World的两种方式 | 对象树

目录 一、通过图形化方式,在界面上创建出一个控件 二、通过代码方式,创建Hello World 三、Qt 内存泄漏问题 (一) 对象树 一、通过图形化方式,在界面上创建出一个控件 创建项目后,打开双击forms文件夹中的ui文件,可…

几种常见的python开发工具

​ Python是一种功能强大且易于学习的编程语言,被广泛应用于数据科学、机器学习、Web开发等领域。随着Python在各个领域的应用越来越广泛,越来越多的Python开发工具也涌现出来。但是,对于新手来说,选择一款合适的Python开发工具可…

Flutter使用auto_updater实现windows/mac桌面应用版本升级功能

因为windows应用一般大家都是从网上下载的,后期版本肯定会更新,那用flutter开发windows应用,怎么实现应用内版本更新功能了?可以使用auto_updater库, 这个插件允许 Flutter 桌面 应用自动更新自己 (基于 sparkle 和 wi…

贝叶斯优化BiLSTM分类预测(matlab代码)

贝叶斯优化BiLSTM分类matlab代码 数据为Excel分类数据集数据。 数据集划分为训练集、验证集、测试集,比例为8:1:1 数据处理: 在数据加载后,对数据进行了划分,包括训练集、验证集和测试集,这有助于评估模型的泛化能力。 数据标…

js 实现点击按钮小球加入购物车动画

本文旨在实现类似点击按钮实现小球加入购物车效果。 使用技术: Vue2使用 Pubsub 监听按钮点击事件(如果不想用也可以自己改造下)监听 onmousemove 来获取按钮点击时的鼠标位置 小球组件: html css: 小球父元素&am…

智慧城市中的数字孪生:构建城市管理的未来框架

目录 一、引言 二、数字孪生技术概述 三、数字孪生技术在智慧城市中的应用 1、实时监测与预警 2、模拟与优化 3、智能化决策 4、协同与共享 四、数字孪生技术构建城市管理的未来框架的价值 1、提高管理效率 2、优化资源配置 3、提升公共服务水平 4、增强应对突发事…

VS配置开发与远程调试笔记

先简单写一下,后续详细补充 场景:本地机器开发,虚拟机调试 准备工作: 由于要将生成的文件生成在虚拟机,避免反复拷贝,直接配置虚拟机共享文件夹进行写入,步骤如下: 虚拟机打开网…

设计模式(十四)中介者模式

请直接看原文: 原文链接:设计模式(十四)中介者模式_设计模式之中介模式-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 前言 写了很多篇设计模式的…

代理模式以及静态代理、JDK代理、Cglib代理的实现

代理模式(Proxy) 介绍 1、代理模式:为对象提供一个替身,以控制对这个对象的访问,即通过代理对象访问目标对象,这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作 &…

java-ssm-jsp-大学生互动交流网站设计与实现

java-ssm-jsp-大学生互动交流网站设计与实现 获取源码——》公主号:计算机专业毕设大全

Linux运维:实现光盘开机自动挂载、配置本地yum源教程

Linux运维:实现光盘开机自动挂载、配置本地yum源教程 一、光盘开机自动挂载1、检查光驱设备2、创建挂载点3、编辑/etc/fstab文件4、测试挂载 二、配置本地yum源(挂载光盘或ISO文件)1、挂载ISO文件2、创建YUM仓库配置文件3、清理YUM缓存并测试 💖The Begi…

数据结构——lesson7二叉树 堆的介绍与实现

前言💞💞 啦啦啦~这里是土土数据结构学习笔记🥳🥳 💥个人主页:大耳朵土土垚的博客 💥 所属专栏:数据结构学习笔记 💥对于数据结构顺序表链表有疑问的都可以在上面数据结…

python的虚拟环境

python的虚拟环境可以为项目创建一个独立的环境,能够解决使用不同版本依赖给项目带来冲突的麻烦。创建虚拟环境的方式有很多种,pipenv会自动帮你管理虚拟环境和依赖文件,并且提供了一系列命令和选项来帮忙你实现各种依赖和环境管理相关的操作…

代码随想录算法训练营第三十九天|62.不同路径、63. 不同路径 II

62.不同路径 刷题https://leetcode.cn/problems/unique-paths/description/文章讲解https://programmercarl.com/0062.%E4%B8%8D%E5%90%8C%E8%B7%AF%E5%BE%84.html视频讲解https://www.bilibili.com/video/BV1ve4y1x7Eu/?vd_sourceaf4853e80f89e28094a5fe1e220d9062 题解&…

储能系统---交流充电桩(三)

一、充电模式及其功能要求 关注公众号 --- 小Q下午茶 新国标在标准 GB/T 18487.1-2015《电动汽车传导充电系统 第1部分:通用要求》中规定了 4 种充电模式,下面将对这 4 种充电模式及其功能要求进行介绍。 1.1 、模式 1 模式 1 是指在充电系统中应使用…

3D数字孪生运行不起来?该检查你的电脑配置了

运行3D数字孪生项目通常需要一定的计算资源和图形处理能力。以下是一些常见的电脑配置要求,可以作为参考:1处理器(CPU):推荐使用多核心处理器,如Intel Core i7或更高级别的处理器。较高的时钟频率和较大的缓…

使用 Docker 部署 File Browser 文件管理系统

1)File Browser 介绍 官网:https://filebrowser.org/ GitHub:https://github.com/filebrowser/filebrowser 今天为大家分享一款开源的私有云盘项目:File Browser,简单实用、轻量级、跨平台,安装部署简单快…

CMake笔记

CMake笔记 文章目录 CMake笔记1 工程项目一般形式2 常见命令2.1 project2.2 set2.3 message2.4 add_executable()2.5 语法原则2.6 add_subdirectory2.7 add_library2.8 list 3 安装3.1 安装.h文件/文本文件3.2 安装工程脚本3.3 安装目录/目录下内容3.4 安装库文件3.5安装过程 4…

AI大模型,掀起新一波智能浪潮!

AI大模型的出现,标志着人工智能技术迈入了一个新的阶段。这些巨大的模型不仅在规模上超越了以往任何其他人工智能系统,而且在性能上也取得了巨大的突破。由于其庞大的参数量和复杂的结构,AI大模型在各个领域展现出了强大的学习能力和推理能力…

434G数据失窃!亚信安全发布《勒索家族和勒索事件监控报告》

最新态势快速感知 最新一周全球共监测到勒索事件90起,与上周相比数量有所增加。 lockbit3.0仍然是影响最严重的勒索家族;alphv和cactus恶意家族也是两个活动频繁的恶意家族,需要注意防范。 Change Healthcare - Optum - UnitedHealth遭受了…