JavaScript中的事件循环(event loop)机制

2023-10-30


⭐ 专栏简介

前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中,我们将以问答形式每天更新,为大家呈现精选的前端知识点和常见问题解答。通过问答形式,我们希望能够更直接地回应读者们对于前端技术方面的疑问,并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具,我们将深入浅出地解释概念,并提供实际案例和练习来巩固所学内容。同时,我们也会分享一些实用技巧和最佳实践,帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此,我们还会定期推出一些项目实战教程,让你能够将所学知识应用到实际开发中。通过实际项目的练习,你将能够更好地理解前端开发的工作流程和方法论,并培养自己解决问题和独立开发的能力。我们相信,只有不断积累和实践,才能真正掌握前端开发技术。因此,请准备好迎接挑战,勇敢地踏上这段前端入门之旅!无论你是寻找职业转型、提升技能还是满足个人兴趣,我们都将全力以赴,为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧!加入前端入门之旅,成为一名出色的前端开发者! 让我们启航前端之旅

JavaScript中的事件循环(Event Loop)是一种重要的机制,用于管理异步代码的执行。它确保 JavaScript 单线程环境中的任务按照正确的顺序执行,同时允许异步操作如定时器、网络请求和事件处理。

事件循环的机制可以分为以下几个重要部分:


⭐ 调用栈(Call Stack)

调用栈是用于管理函数调用的一种数据结构。当您调用一个函数时,该函数会被推入调用栈中,表示它正在执行。当函数执行完毕后,它将从调用栈中弹出。这是一个后进先出(LIFO)的数据结构。


⭐ 消息队列(Message Queue)

消息队列用于存储待处理的消息或任务。这些消息通常是由异步操作产生的,如定时器、事件处理程序、网络请求等。每个消息都包含一个回调函数和相关的信息。


⭐ 事件循环(Event Loop)

事件循环是一个持续运行的进程,它不断地检查调用栈和消息队列。它的工作流程如下:

  • 检查调用栈是否为空,如果为空,则等待直到有新的任务进入。
  • 如果调用栈不为空,则检查消息队列是否有待处理的消息。
  • 如果消息队列中有消息,事件循环会将消息中的回调函数推入调用栈中执行。
  • 执行完回调函数后,从调用栈中弹出,并继续检查消息队列中的下一个消息。
  • 这个过程不断重复,确保在合适的时机执行异步任务。

⭐ 宏任务和微任务

在消息队列中,任务可以分为宏任务(macro task)和微任务(micro task)两种类型:

  • 宏任务包括定时器回调、事件处理程序、I/O 操作等,它们会被推入消息队列中,等待执行。
  • 微任务包括 Promise 的回调函数、async/await 的异步函数等,它们的优先级比宏任务高,会在当前宏任务执行完毕后立即执行。

在事件循环中,会首先执行所有微任务,然后才执行宏任务。这确保了微任务能够在下一个宏任务开始之前执行,有助于更快地响应异步操作。


⭐ 示例

以下是一个简单的示例,演示了事件循环的工作流程:

console.log("Start");

setTimeout(function () {
  console.log("Timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Promise");
});

console.log("End");

输出顺序将是:

  1. “Start”
  2. “End”
  3. “Promise”
  4. “Timeout”

在这个示例中,setTimeout 回调被放入宏任务队列,而 Promise 回调被放入微任务队列。因此,微任务会在宏任务之前执行。

总之,事件循环是 JavaScript 异步编程的核心机制之一,它确保了异步任务的有序执行,使得 JavaScript 单线程环境下的异步操作得以实现。


⭐ 写在最后

本专栏适用读者比较广泛,适用于前端初学者;或者没有学过前端对前端有兴趣的伙伴,亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点,所以如果你具备了前端的基础跟着本专栏学习,也是可以很大程度帮助你查漏补缺,由于博主本人是自己再做内容输出,如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我,我们一起进步,与此同时也推荐大家几份专栏,有兴趣的伙伴可以订阅一下:除了下方的专栏外大家也可以到我的主页能看到其他的专栏;

前端小游戏(免费)这份专栏将带你进入一个充满创意和乐趣的世界,通过利用HTML、CSS和JavaScript的基础知识,我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验,这个专栏都适合你。我们会从最基础的知识开始,循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习,你将学会如何运用HTML来构建页面结构,使用CSS来美化游戏界面,并利用JavaScript为游戏添加交互和动态效果。在这个专栏中,我们将涵盖各种类型的小游戏,包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程,并提供详细解释和代码示例。同时,我们也会分享一些优化技巧和最佳实践,帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能,还是对页面游戏开发感兴趣,前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】(付费) 欢迎来到Vue3通透教程!这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南(免费) 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码,我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者,都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成,我们将全面覆盖各个方面。通过阅读本专栏,您将能够提升JavaScript代码的可靠性和可维护性,并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧!点击订阅TypeScript入门指南专栏

在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript中的事件循环(event loop)机制 的相关文章

  • Jquery获取选中的复选框

    您好 我想获取页面中选定复选框的列表 实际上我真正需要的是获取复选框旁边的元素的文本 该元素是一个 html 元素 li 代码如下 但它不起作用 这是我当前的 jQuery document ready function target cl
  • Angular UI 模式的范围问题

    我无法理解 使用角度 UI 模式的范围 虽然这里不是很明显 但我已经正确设置了模块和所有内容 据我所知 但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
  • 将 Javascript 对象的属性从 string 更改为 int

    我有一个对象数组 每个对象具有三个属性 年份 总计 人均 例子 0 Object per capita 125 8 total 1007 2 year 2009 这些属性是字符串 我想创建一个循环来遍历数组并将它们转换为 int 我尝试了以
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • .push() 将多个对象放入 JavaScript 数组中返回“未定义”

    当我将项目添加到beats数组然后console log用户时 我得到了数组中正确的项目数 但是当我检查 length 时 我总是得到 1 尝试调用索引总是会给我 未定义 如下所示 Tom beats 1 我想我错过了一些明显的东西 但这让
  • 如何使用有角度的材料创建卡片网格?

    我正在尝试使用 ng repeat 创建每行三张卡片的网格 我有一个普通的 javascript 对象数组附加到范围 下面的代码将为每张卡创建一个新行 div div
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • JavaScript 中的 Promise 有什么意义?

    一个承诺是一个 可能现在可用 或将来可用 或永远不可用的值 来源 MDN 假设我有一个想要处理图片的应用程序 图片已加载 例如在算法在后台使用它之后 或某种其他类型的延迟 现在我想检查一下图片是否可以在future 通过使用承诺 而不是回调
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • 使用 Enzyme 测试 `React.createRef` api

    我想测试下面的类 它使用React createRef api 不过 快速搜索并没有发现任何这样做的例子 有人成功过吗 我该如何嘲笑裁判 理想情况下我想使用shallow class Main extends React Component

随机推荐

  • 随手记录(日历)

    日历
  • 7.最大最小距离算法与最大最小距离

    7 最大最小距离算法与最大最小距离 最大最小距离算法 最大最小距离算法是一种聚类算法 算法描述 1 任意选取一个样本模式作为第一聚类中心K1 2 选择离Z1最远欧氏距离的模式样本作为第二聚类中心K2 3 逐个计算每个模式样本与已确定的所有聚
  • 哈希表(散列表)原理详解

    什么是哈希表 哈希表 Hash table 也叫散列表 是根据关键码值 Key value 而直接进行访问的数据结构 也就是说 它通过把关键码值映射到表中一个位置来访问记录 以加快查找的速度 这个映射函数叫做散列函数 存放记录的数组叫做散列
  • Kibana启动Kibana server is not ready yet

    问题 页面访问Kibana路径显示 Kibana server is not ready yet 原因1 启动Kibana时指定ElasticSearch地址错误 http 116 62 19 81 9200 需要改为自己本机服务器的ip和
  • python调用GPT实现:智能用例生成工具

    工具作用 根据输入的功能点 生成通用测试点 实现步骤 工具实现主要分2个步骤 1 https请求调用Gpt 将返回响应结果保存为 md文件 2 用python实现 将 md文件转换成 xmind文件 3 写个简单的前端页面 调用上述步骤接口
  • zabbix-server仪表板出现: 不

    1 检查配置文件 vi etc zabbix zabbix server conf 里面的配置项是否还是原始的 如果是 请修改如下 2 检查第二个配置文件 vi etc zabbix web zabbix conf php 修改之前的原始配
  • 未转变者怎么调服务器难度,Unturned——作弊模式下的各项数值微调【较实用的已详细描述】...

    您尚未登录 立即登录享受更好的浏览体验 您需要 登录 才可以下载或查看 没有帐号 注册 register x 本帖最后由 Crazy Zombie 于 2017 8 11 10 31 编辑 如标题所示 在下发一个关于Unturned模式下各
  • 区块链与哈希函数

    目录 哈希函数 定义 性质 发展 常见攻击方法 1 穷举攻击 2 生日攻击 3 其他攻击 构造方法 1 利用对称密码体制来设计哈希函数 2 直接设计哈希函数 编辑 常用哈希函数简介 1 SHA 256算法 编辑 2 Keccak算法 3 S
  • Rust 学习心得<3>:无栈协程

    Rust 学习心得 lt 3 gt 无栈协程 有栈协程 vs 无栈协程 Go 有栈协程 Rust 协程 绿色线程 GreenThread 无栈协程 协程解决的问题 Rust作为一门新兴语言 主打系统编程 提供了多种编写代码的模式 Rust在
  • 虚幻引擎入门_框架

    虚幻引擎所提供的GamePlay框架可谓是虚幻引擎最为重要的一部分内容也不为过 虚幻引擎的设计希望开发人员在使用引擎之前是准备好了的 并且有充足的能力去理解游戏设计意图 在此之上为我们提供了一套开发规则 我们称之为游戏框架 GamePlay
  • 给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写。

    1 给定一个字符串 验证它是否是回文串 只考虑字母和数字字符 可以忽略字母的大小写 说明 本题中 我们将空字符串定义为有效的回文串 示例 1 输入 A man a plan a canal Panama 输出 true 示例 2 输入 ra
  • 环形缓冲器

    环形缓冲器 ringr buffer 也称作圆形队列 circular queue 循环缓冲区 cyclic buffer 圆形缓冲区 circula buffer 是一种用于表示一个固定尺寸 头尾相连的缓冲区的数据结构 适合缓存数据流 中
  • 编译出错总结

    1 incompatible types in assignment of char to char 64 可以使用strcpy 解决 2 error assigning to an array from an initializer li
  • Unity PlayerPrefs记录时间

    static public void SaveDateTimeInPlayerPrefs string key DateTime dt string timeStr dt ToString yyyy MM dd HH mm ss Playe
  • 时序预测

    时序预测 MATLAB实现基于BP神经网络的时间序列预测 递归预测未来 多指标评价 目录 时序预测 MATLAB实现基于BP神经网络的时间序列预测 递归预测未来 多指标评价 预测结果 基本介绍 程序设计 参考资料 预测结果 基本介绍 Mat
  • IOS7手势识别

    添加一个view 给view加上各种手势查看效果 UIView gestureTestView UIView alloc initWithFrame CGRectMake 100 100 200 200 gestureTestView ba
  • AI开源项目分享:pytorch增强图像数据、Tensorflow 2.0实现...

    文末免费送电子书 七月在线干货组最新 升级的 名企AI面试100题 免费送 项目一 igel 无需编写代码即可训练 测试和使用模型 一个令人愉悦的机器学习工具 可让您无需编写代码即可训练 拟合 测试和使用模型 该项目的目标是为技术用户和非技
  • Windows server 2008 r2关于SMB签名未配置的漏洞修复

    一 漏洞描述 SMB签名未配置漏洞是指 远程SMB服务器上未配置需要签名 这将导致未经身份验证的远程攻击者可以利用此漏洞对SMB服务器进行中间人攻击 SMB是一个协议名 全称是Server Message Block 服务器消息快协议 用于
  • 第二十三篇:UE Ceisum开发之如何加载本地地形及经纬度、空间坐标相互转化

    本篇是基于Cesium for Unreal这个插件 基本入门我这里就不多说了 不会的人可以先跟着这个教程学习一下 Cesium for Unreal快速入门 本篇重点讲述一下如何加载本地地形 1 准备工作 安装最新的Cesiumlab软件
  • JavaScript中的事件循环(event loop)机制

    聚沙成塔 每天进步一点点 专栏简介 调用栈 Call Stack 消息队列 Message Queue 事件循环 Event Loop 宏任务和微任务 示例 写在最后 专栏简介 前端入门之旅 探索Web开发的奇妙世界 记得点击上方或者右侧链