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

news2024/10/5 13:08:05

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 调用栈(Call Stack)
  • ⭐ 消息队列(Message Queue)
  • ⭐ 事件循环(Event Loop)
  • ⭐ 宏任务和微任务
  • ⭐ 示例
  • ⭐ 写在最后


⭐ 专栏简介

前端入门之旅:探索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入门指南专栏

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何取消KEIL-MDK工程中出现的CMSIS绿色图标

如何取消KEIL-MDK工程中出现的CMSIS绿色图标?我以前经常遇到,不知道怎么搞,好像也不影响编译结果。以前问过其他人,但是不知道怎么搞,相信很多人也遇到过。水平有限,表达不清楚,见下图&#xff…

Java 反射调用自己写的对象方法

一、java 反射的定义 定义:JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法,这种动态获取、调用对象方法的功能称为java语言的…

JavaScript 中的原型到底该如何理解?

JavaScript作为一个基于原型的OOP,和我们熟知的基于类的面向对象编程语言有很大的差异。如果不理解其中的本质含义,则无法深入理解JavaScript的诸多特性,以及由此产生的诸多“坑”。在讨论“原型”的概念之前,我们先来讨论一下“类…

APS系统设计经验分享(时间推导II - 2023.09)

在前一篇关于APS系统设计分享文章(《APS系统设计经验分享(时间推导 - 2023.03)》)中,我们提到将会分享使用OptaPlanner作为规划引擎开发APS系统过程中,遇到的一些时间相关的设计建议与异常情况分析。后来一直忙于项目工作,直到现在才想起仍欠…

CSS---flex布局

主要记录flex布局的要点以及实例 flex flex父标签的6个属性flex-direction: flex布局的方向flex-wrap: 是否可以换行flex-flow: flex-direction 和 flex-wrap 一起写justify-content:横向对齐方式align-items: 纵向对齐方式align-content: 有换行情况下的纵向对齐方…

DR IP-SoC China 2023 Day演讲预告 | 龙智Perforce专家解析芯片开发中的数字资产管理

2023年9月6日(周三),龙智即将亮相于上海举行的D&R IP-SoC China 2023 Day,呈现集成了Perforce与Atlassian产品的芯片开发解决方案,助力企业更好、更快地进行芯片开发。 D&R IP-SoC China 2023 Day 是中国首个…

[论文笔记]ESIM

引言 这是经典论文Enhanced LSTM for Natural Language Inference的笔记。 本篇论文文是建立在自然语言推理(Natural Language Inference,NLI)任务上的。提出了简单的通过基于LSTM的序列推理模型效果到达了当时的SOTA水平。同时基于该模型,在局部推理建模层和推理组合层使用了…

三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析

三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析 OBJ格式是一种常用的三维模型文件格式,它存储了三维模型的几何信息和纹理坐标等相关属性。在大规模场景中加载和渲染三维模型时,OBJ格式的轻量化压缩对于提高性能和效率起到了重要的作用。…

Java多线程(Thread)详解之启动与中断

在我的前一篇博客中直接介绍了Thread的”五种“打开方式:Thread的”五种“打开方式https://blog.csdn.net/qq_45875349/article/details/132644717?spm1001.2014.3001.5501 但是还没有详细的对Thread类进行说明,这篇博客主要对Thread类进行介绍&#x…

软件产品选型测试POC测试怎么做?

软件poc测试 一、基本概述 软件选型测试是在软件采购的前提或采购过程中,通过对待选软件进行测试比对,筛选出适合的软件。通过对候选的软件进行量化或非量化的横向比对测试,为建设单位选择产品、供货方参加投标提供较直接的依据。 二、测试…

现在的校招面试,管你是不是应届生

作者:小傅哥 博客:https://bugstack.cn 沉淀、分享、成长,让自己和他人都能有所收获!😄 一、他,上来打我! 【字节】除了MQ解耦发奖,是否还有比MQ更优的解决方案?【字节】…

算法通关村16关 | 堆与滑动窗口问题结合

1. 堆与滑动窗口问题结合 题目 LeetCode239 给你一个整数数组nums,有一个大小为k的滑动窗口从数组的最左侧移动到数组的最右侧,你可以看到在滑动窗口内的k个数字,滑动窗口每次只向右移动一位,返回滑动窗口中的最大值。 思路 对于…

css 文字单行多行超出长度后显示 ...

0.超出… 1、单行文本超出 <div class"content">测试数据&#xff1a;css单行文本超出显示省略号--------</div><style> .content{width: 200px;height: 200px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:el…

linux信号量

通过学习linux的信号量&#xff0c;对linux的信号量进行了编程。

QT(9.4)tcp通信,数据库,opencv,

作业&#xff1a; 1.服务器 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpSocket>//客户端头文件 #include <QMessageBox>//消息对话框头文件 #include <QTcpServer>//服务器头文件 #include <list>…

docker报错解决方法

ERROR: readlink /var/lib/docker/overlay2/l: invalid argument 注意&#xff1a;会清空已有安装 sudo service docker stop sudo rm -rf /var/lib/docker sudo service docker start

LeetCode 热题 100——无重复字符的最长子串(滑动窗口)

题目链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目解析 从s字符串中&#xff0c;去找出连续的子串&#xff0c;使该子串中没有重复字符&#xff0c;返回它的最长长度。 暴力枚举 依次以第一个、第二个、第三个等等为起点去遍历字符串&a…

Python小知识 - Python爬虫进阶:如何克服反爬虫技术

Python爬虫进阶&#xff1a;如何克服反爬虫技术 爬虫是一种按照一定的规则&#xff0c;自动抓取网页信息的程序。爬虫也叫网页蜘蛛、蚂蚁、小水滴&#xff0c;是一种基于特定算法的自动化程序&#xff0c;能够按照一定的规则自动的抓取网页中的信息。爬虫程序的主要作用就是从一…

springboot自动装配原理,手写一个starter。

文章目录 springboot自动装配原理手写starter手写starter总结&#xff1a; springboot自动装配原理 口述&#xff1a; springboot自动装配的话它其实就是只需要我们添加一个starter起步依赖&#xff0c;它就能完成这个依赖组件相关Bean的自动注入&#xff0c;其实就是自动的将…

ORB-SLAM2算法13之跟踪线程Tracking

文章目录 0 引言1 跟踪线程Tracking1.1 概述1.2 初始化1.2.1 单目初始化1.2.2 双目/RGBD初始化 1.3 跟踪方法1.3.1 恒速模型跟踪1.3.2 参考关键帧跟踪1.3.3 重定位跟踪 1.4 局部地图跟踪1.4.1 流程1.4.2 更新局部关键帧1.4.3 更新局部地图点1.4.4 进一步优化 1.5 关键帧生成1.5…