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)机制 的相关文章

  • while 循环中 regex.exec() 赋值的更好解决方案

    这里有更好的解决方案吗 我尽量避免里面的作业while但仍然能够循环匹配并使用捕获的组 var match var CSS URL PATTERN url s s s s gm while match CSS URL PATTERN exe
  • 使用 Google Apps 脚本处理数组中输入元素中的多个文件

    我有一个表单 允许从下拉列表中选择一个项目并上传文件 项目的名称和 ID 保存在电子表格文档中 适用于一个文件 但我想上传多个文件 你能帮我修改一下脚本吗 HTML 部分如下所示 div class col md 4 col sm 6 di
  • 如何阻止地址自动填充谷歌地点

    所以我在我的表单上有一个谷歌地图自动完成功能 当它到达一个位置时 它会占据该位置并格式化它 以便所有正确的信息都进入表单上的不同输入 我遇到的问题是在 place changed 事件触发自动完成填充输入之前 我想阻止最初的人口 而是填充我
  • 如何在html中创建字体选择栏

    我想创建一个下拉菜单 在其中我们可以看到所有可用的字体 并且可以选择我们选择的任何字体 我还想创建一个字体颜色选择小部件 存在大量的字体样式 我想知道如何获取所有这些字体以及如何创建一个小部件 用户可以使用该小部件选择他选择的颜色 为了创建
  • 如何在 Jquery Chosen 插件中搜索乌尔都语?还有其他方法在 Selectbox 中搜索乌尔都语吗?

    基本上我想在选择框中有搜索选项 并在选择框中选择实现的 jquery 所有选项均采用乌尔都语语言 如何扩展所选搜索以匹配乌尔都语 或者还有另一种方法在选择框中搜索乌尔都语 任何其他建议 提前致谢 有一种非常简单的方法可以将所有正则表达式逻辑
  • 从画布保存/转换后文件质量下降的问题

    这是我正在使用的代码 代码位于这篇文章的底部 但这里是链接GitHubGist Noitidart ff addon snippet browseForBadgeThenCreateSaveAnApply js https gist git
  • React 功能组件:作为函数调用与作为组件调用

    假设我有一个功能组件 const Foo props gt div props name div 直接作为函数调用有什么区别 const fooParent gt div Foo name foo div 与将其称为组件相比 const f
  • 使用 ECMA 脚本向节点(页面)添加新属性

    我需要在页面激活时向页面添加属性 我决定建立一个工作流程 在激活步骤之前执行相同的操作 我的自定义工作流程步骤 激活步骤之前的步骤 使用 ECMA 脚本来实现此目的 这是我到目前为止所拥有的 var workflowData granite
  • 名称属性的 CSS 选择器?

    这可能是一个愚蠢的问题 但是属性的 CSS 选择器是什么 a 那是 名字 document body innerHTML myString anchor HTML String 这段 JavaScript 创建了一个 a 带有名称的元素 H
  • 如何使用Javascript获取ASP.NEt Web Forms标签的值?

    我有以下标签控件
  • 类型错误:require.config 不是一个函数

    我正在使用 require js 作为早午餐项目的一部分 这段代码抛出错误 require config require config is not a function paths jquery lib jquery underscore
  • 什么是{| ... |} 在 JavaScript 中是什么意思? [复制]

    这个问题在这里已经有答案了 通读 javascript 代码库 我遇到了如下代码块 export type RouteReducerProps error Error isResolving boolean isResolved boole
  • 从变量值动态设置 ng-controller

    我正在使用 AngularJs 和 NodeJS 开发一个应用程序 我对将控制器的名称设置为主控制器中的变量的值感到震惊 为了更好地解释它 我的 index html 看起来像这样 tbody tr td td td member task
  • 如何使用 Soundcloud api 将流传输到 html5 音频播放器中?

    我刚刚开始学习 javascript 作为我的第一次尝试 我想创建自定义音频播放器 它使用 soundcloud 的 api 作为音乐源 到目前为止 这就是我的设置
  • Meteor JS:存储特定模板实例状态的最佳方法是什么?

    我正在学习 Meteor JS 中的会话和反应式数据源 它们非常适合设置全局 UI 状态 但是 我不知道如何将它们的范围限制到模板的特定实例 这就是我想做的 我的页面上有多个可内容编辑的元素 每个下面都有一个 编辑 按钮 当用户单击 编辑
  • 云函数 onUpdate:无法读取未定义的属性“forEach”

    现在我正在尝试更新我的项目中的图片 我可以更新云火商店中的图片网址 但我也想使用 firebase 云功能从云存储中删除上一张图片 我想要实现的是 当我上传新图片时 从云存储中删除以前的图片 This is my data structur
  • 如何应对 WebStorm 中大量未解决的变量警告?

    我有一个从服务器获取数据的函数 function getData data console log data someVar 网络风暴说someVar是一个未解决的变量 我怎样才能摆脱这样的警告 我看到几个选项 禁止 IDE 设置中的警告
  • Electron 应用程序中的 NEDB 持久化

    我正在尝试从电子应用程序连接到 nedb CRUD 操作效果很好 但我没有看到 db 文件 D my db 检查隐藏文件 文件存在于某个地方 因为即使在机器重新启动后它也会保留数据 我怀疑电子威胁着我的相对路径 但我可以在任何地方找到它 v
  • 角度距离计算

    我正在使用角度制作距离计算应用程序 Html
  • 表单帖子上的 asp.net mvc 编码

    我在我的 asp net mvc 表单 带有文本区域的 nicedit 中使用富文本编辑器 当我在帖子上提交表单时 因为它不是 html 编码的 我收到以下消息 从客户端检测到潜在危险的 Request Form 值 如何对 post 上的

随机推荐

  • 随手记录(日历)

    日历
  • 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开发的奇妙世界 记得点击上方或者右侧链