【JS】事件循环

news2024/9/19 8:19:05

事件循环(Event Loop)

什么是事件循环

事件循环就是一个执行任务队列的机制

为什么会出现事件循环

为了避免单线程出现阻塞,采用了异步的形式执行任务。为了解决异步任务的问题,采用了事件循环机制。

事件循环的流程

JavaScript是一门单线程的语言,代码执行顺序由上至下依次执行。
当JavaScript代码执行到一个异步操作或事件时,会将其放入对应的任务队列中。
当主线程执行完同步任务后,在任务队列中取出一个异步任务执行。
当任务执行时,可能会产生新的异步操作和事件,这些新的操作也会被放入任务队列中等待执行。
在主线程中的任务执行完成后,再去任务队列取出下一个任务执行,不断循环。
在这里插入图片描述

当主线程执行完同步任务后,在任务队列中取出一个异步任务执行时,并不是根据进入任务队列先后取出,而是先执行微观任务,再执行宏观任务

微任务 宏任务

宏任务包括一些比较耗时的任务,例如setTimeout、setInterval、AJAX请求、DOM事件等等。
微任务指的是一些比较短且需要立即执行的任务,比如Promise的方法等等。

举个栗子

console.log('start')

setTimeout(() => {
    console.log('timeout1')
}, 0)

new Promise((resolve) => {
    console.log('promise1')
    resolve()
}).then(() => {
    console.log('then1')
})

console.log('end')

在这里插入图片描述

解析:Promise对象是同步执行的,所以会输出promise1。但是.then()方法是异步执行的,会被放到任务队列中等待执行,因此end会先输出。然后在任务队列中执行.then()方法,输出then1。最后在任务队列中执行setTimeout中的回调函数,输出timeout1。

参考链接:JavaScript:事件循环机制(EventLoop)

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

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

相关文章

Chapter 17 Python文件操作(下)

欢迎大家订阅【Python从入门到精通】专栏,一起探索Python的无限可能! 文章目录 前言一、文件的写入二、文件的追加 前言 Python作为一种高效且易于学习的编程语言,提供了一系列强大的文件操作功能,使得用户能够轻松地实现文件的读…

深度解析Linux-C——函数和内存管理

目录 函数指针: 指针函数: 参数为指针的函数: 参数为数组的函数: C语言内存管理 stdlib.h头文件常用函数介绍 1、局部变量 2、全局变量 3、 堆空间变量 4、静态变量 5、常量 函数指针: 指向函数的指针&#…

针对datax-web 中Swagger UI接口未授权访问

application.yml 添加以下配置 实现访问doc.html 以及/v2/api-docs 接口时需要进行简单的校验 swagger:basic:enable: trueusername: adminpassword: 12345 配置重启后再进行相关访问则需要输入用户名和密码

Radon(拉当) 变换:超详细讲解(附MATLAB,Python 代码)

Radon 变换 Radon 变换是数学上用于函数或图像的一种积分变换,广泛应用于图像处理领域,尤其是在计算机断层成像 (CT) 中。本文档将详细介绍 Radon 变换的数学含义及其在图像处理中的应用。 数学定义 Radon 变换的数学定义是将二维函数 f ( x , y ) f…

Spark实时(二):StructuredStreaming编程模型

文章目录 StructuredStreaming编程模型 一、基础语义 二、事件时间和延迟数据 三、​​​​​​​容错语义 StructuredStreaming编程模型 一、基础语义 Structured Streaming处理实时数据思想是将实时数据看成一张没有边界的表,数据源源不断的追加到这张表中,这可以让我…

零基础STM32单片机编程入门(二十二) ESP8266 WIFI模块实战含源码

文章目录 一.概要二.ESP8266 WIFI模块主要性能参数三.ESP8266 WIFI模块芯片内部框图四.ESP8266 WIFI模块原理图五.ESP8266 WIFI模块与单片机通讯方法1.硬件连接2.ESP8266模块AT指令介绍 六.STM32单片机与ESP8266WIFI模块通讯实验1.硬件准备2.软件工程3.软件主要代码4.实验效果 …

Super 4PCS配准算法

Nicolas Mellado,CNRS(Centre national de la recherche scientifique,法国国家科学研究中心)的研究员,在IRIT(Institut de Recherche en Informatique de Toulouse,图卢兹计算机科学研究所&…

LeetCode Hot100 搜索二维矩阵

给你一个满足下述两条属性的 m x n 整数矩阵: 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target ,如果 target 在矩阵中,返回 true ;否则,返回 false 。…

自动化测试 pytest 中 scope 限制 fixture使用范围!

导读 fixture 是 pytest 中一个非常重要的模块,可以让代码更加简洁。 fixture 的 autouse 为 True 可以自动化加载 fixture。 如果不想每条用例执行前都运行初始化方法(可能多个fixture)怎么办?可不可以只运行一次初始化方法? 答&#xf…

学习笔记:《用Python进行数据分析》之通用函数

通用函数(即ufunc)是一种对ndarray中的数据执行元素级运算的函数。你可以将其看做简单函数(接受一个或多个标量值,并产生一个或多个标量值)的矢量化包装器。 许多ufunc都是简单的元素级变体,如sqrt和exp&a…

HTML前端面试题之<iframe>标签

面试题:iframe 标签的作用是什么?有哪些优缺点 ? 讲真,刷这道面试题之前我根本没有接触过iframe,网课没讲过,项目实战没用过,但却在面试题里出现了!好吧,我只能说:前端路漫漫&…

通过 C# 写入数据到Excel表格

Excel 是一款广泛应用于数据处理、分析和报告制作的电子表格软件。在商业、学术和日常生活中,Excel 的使用极为普遍。本文将详细介绍如何使用免费.NET库将数据写入到 Excel 中,包括文本、数值、数组、和DataTable数据的输入。 文章目录 C# 在Excel单元格…

uniapp map组件自定义markers标记点

需求是根据后端返回数据在地图上显示标记点&#xff0c;并且根据数据状态控制标记点颜色&#xff0c;标记点背景通过两张图片实现控制 <mapstyle"width: 100vw; height: 100vh;":markers"markers":longitude"locaInfo.longitude":latitude&…

Python 实现股票指标计算——DMA

DMA (Deviation Moving Average) - 平均差 1 公式 DMA 收盘价N1日简单平均 - 收盘价N2日简单平均 AMA M日DMA简单平均 2 数据准备 我们以科创50指数 000688 为例&#xff0c;指数开始日期为2019-12-31&#xff0c;数据格式如下&#xff1a; 3 计算过程 def calculate_d…

构造+有序集合,CF 1023D - Array Restoration

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1023D - Array Restoration 二、解题报告 1、思路分析 先考虑合法性检查&#xff1a; 对于数字x&#xff0c;其最左位置和最右位置 之间如果存在数字比x小&#xff0c;则非法 由于q次操作&#xff0c;第q…

Dav_笔记11:SQL Tuning Overview-sql调优 之 5

构建SQL测试用例 对于许多与SQL相关的问题&#xff0c;获得可重现的测试用例可以更轻松地解决问题。从11g第2版&#xff08;11.2&#xff09;开始&#xff0c;Oracle数据库包含SQL测试用例构建器&#xff0c;它可以自动完成收集和复制尽可能多的有关问题及其发生环境的信息的难…

Asp .Net Core 系列:详解授权以及实现角色、策略、自定义三种授权和自定义响应

什么是授权&#xff08;Authorization&#xff09;&#xff1f; 在 ASP.NET Core 中&#xff0c;授权&#xff08;Authorization&#xff09;是控制对应用资源的访问的过程。它决定了哪些用户或用户组可以访问特定的资源或执行特定的操作。授权通常与身份验证&#xff08;Auth…

vue3 vxe-table 点击行,不显示选中状态,加上设置isCurrent: true就可以设置选中行的状态。

1、上个图&#xff0c;要实现这样的&#xff1a; Vxe Table v4.6 官方文档 2、使用 row-config.isCurrent 显示高亮行&#xff0c;当前行是唯一的&#xff1b;用户操作点击选项时会触发事件 current-change <template><div><p><vxe-button click"sel…

大模型算法面试题(十二)

本系列收纳各种大模型面试题及答案。 1、领域模型Continue PreTrain数据如何选取 在领域模型的Continue PreTrain&#xff08;持续预训练&#xff09;过程中&#xff0c;数据选取是一个至关重要的步骤&#xff0c;它直接影响模型在特定领域上的性能和泛化能力。以下是一些关于…

【资料分享】2024钉钉杯大数据挑战赛A题思路解析+代码演示

2024第三届钉钉杯大学生大数据挑战赛今天已经开赛&#xff0c;【A题】思路解析代码&#xff0c;资料预览&#xff1a;