25-什么是事件循环

一、是什么

🍿🍿🍿JavaScript是一门单线程的语言

意味着同一时间内只能做一件事,但是这并不意味着单线程就是阻塞,而实现单线程非阻塞的方法就是事件循环

在JavaScript中,所有的任务都可以分为

  • 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
  • 异步任务:异步执行的任务,比如ajax网络请求,setTimeout定时函数等

同步任务与异步任务

在这里插入图片描述
同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。上述过程的不断重复就事件循环

提示:以下是本篇文章正文内容,下面案例可供参考

二、宏任务与微任务

😂😂😂如果将任务划分为同步任务和异步任务并不是那么的准确

console.log(1)
setTimeout(()=>{console.log(2)
}, 0)
new Promise((resolve, reject)=>{console.log('new Promise')resolve()
}).then(()=>{console.log('then')
})
console.log(3)

如果按照上面流程图来分析代码,我们会得到下面的执行步骤

  • console.log(1),同步任务,主线程中执行
  • setTimeout() ,异步任务,放到 Event Table,0 毫秒后 console.log(2)回调推入 Event Queue 中
  • new Promise ,同步任务,主线程直接执行
  • .then ,异步任务,放到 Event Table
  • console.log(3),同步任务,主线程执行

所以按照分析,它的结果应该是 1 => ‘new Promise’ => 3 => 2 => ‘then’

但是实际结果是:1=>‘new Promise’=> 3 => ‘then’ => 2

出现分歧的原因在于异步任务执行顺序,事件队列其实是一个“先进先出”的数据结构,排在前面的事件会优先被主线程读取

例子中 setTimeout回调事件是先进入队列中的,按理说应该先于 .then 中的执行,但是结果却偏偏相反

原因在于异步任务还可以细分为微任务与宏任务

微任务

🌭🌭🌭一个需要异步执行的函数,执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有

  • Promise.then
  • MutaionObserver
  • Object.observe(已废弃;Proxy对象替代)

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

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

相关文章

【Docker】Docker Compose服务依赖与健康检查

docker compose环境变量 为增加安全性,在前面的python例子中增加redis的密码校验,密码从环境变量中获取: from flask import Flask from redis import StrictRedis import os import socketapp Flask(__name__) redis StrictRedis(hostos…

操作系统——内存扩容:覆盖技术、交换技术(王道视频p44)

1.对于覆盖技术 和 交换技术:(并不是重点)

React 核心与实战2023版

课程亮点: 完整的前后台项目(PC+移动;完成业务;)React 最新企业标准技术栈(React 18 + Redux + ReactRouter + AntD)React + TypeScript (为大型项目奠定了基础)课程内容安排: React 介绍 React 是什么? React 是由Meta公司研发,是一个用于 构建Web和原生交互界面…

nexus 快速搭建-本地私有仓库 -maven

场景: 需要上传打包starer本地、局域网内 jar包上传、下载搭建后本地有层代理,可节省代宽,无网可拉包等… 下载: https://help.sonatype.com/repomanager3/product-information/download 基本说明: proxy 用来代理远程…

01-初识VUE3

01.初识VUE3 1.创建VUE3项目 1).使用 vue-cli 创建 ## 查看vue/cli版本,确保vue/cli版本在4.5.0以上 vue --version ## 安装或者升级你的vue/cli npm install -g vue/cli ## 创建 vue create vue_test ## 启动 cd vue_test npm run serve2).使用 vite 创建 ## 创…

LLM系列 | 23:多模态大模型:浦语·灵笔InternLM-XComposer解读、实战和思考

引言 ​简介 模型解读 模型架构 训练 实战 环境准备 本地实测 服务部署 总结 引言 谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳。 Created by DALLE 3 小伙伴们好,我是《小窗幽记机器学习》的小编:卖热干面的小女孩…

深入浅出排序算法之堆排序

目录 1. 算法介绍 2. 执行流程⭐⭐⭐⭐⭐✔ 3. 代码实现 4. 性能分析 1. 算法介绍 堆是一种数据结构,可以把堆看成一棵完全二叉树,这棵完全二叉树满足:任何一个非叶结点的值都不大于(或不小于)其左右孩子结点的值。若父亲大孩子小&#x…

【密评】商用密码应用安全性评估从业人员考核题库(十五)

商用密码应用安全性评估从业人员考核题库(十五) 国密局给的参考题库5000道只是基础题,后续更新完5000还会继续更其他高质量题库,持续学习,共同进步。 3501 单项选择题 根据GM/T 0115 《信息系统密码应用测评要求》&am…

如何用 JMeter 编写性能测试脚本?

Apache JMeter 应该是应用最广泛的性能测试工具。怎么用 JMeter 编写性能测试脚本? 1. 编写 HTTP 性能测试脚本 STEP 1. 添加 HTTP 请求 img STEP 2. 了解配置信息 HTTP 请求各项信息说明(以 JMeter 5.1 为例)。 如下图所示:…

linux系统安装Googletest单元测试框架

环境信息 系统:ubuntn cmake版本:3.5.1 gcc版本:5.4.0 1、下载googletest git clone https://github.com/google/googletest.git注意!不选branch的话默认下载最新版本(需要编译器能够支持C14),…

Android framework服务命令行工具框架 - Android13

Android framework服务命令行工具框架 - Android13 1、framework服务命令行工具简介2、cmd 执行程序2.1 目录和Android.bp2.2 cmdMain 执行入口2.3 cmd命令 3、am命令工具,实质脚本执行cmd activity3.1 sh脚本3.2 activity服务注册3.3 onShellCommand执行 4、简易时…

javaEE -9(7000字详解TCP/IP协议)

一: IP 地址 IP地址(Internet Protocol Address)是指互联网协议地址,又译为网际协议地址。 IP地址是IP协议提供的一种统一的地址格式,它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物…

使用pycharm远程连接到Linux服务器进行开发

预计达到的效果 本地的 PyCharm 能达到和远程服务器之间的文件同步;本地的 PyCharm 能够使用远程服务器的开发环境; 环境配置 PyCharm:PyCharm 2021.3 (Professional Edition)Linux服务器:Ubuntu20.04 步骤 1.进入配置项 配…

Python 算法高级篇:桶排序与基数排序

Python 算法高级篇:桶排序与基数排序 引言什么是桶排序?桶排序的基本步骤桶排序的示例 什么是基数排序?基数排序的基本步骤基数排序的示例 桶排序与基数排序的应用桶排序的应用基数排序的应用 Python 示例代码总结 引言 在算法高级篇的课程中…

从设计、制造到封测,XSKY 智能存储助力半导体行业数字化转型

近日,ECS2023 第五届中国电子通信与半导体 CIO 峰会在深圳召开,峰会以“数字科技与业务重塑”为主题,汇聚了 300来自电子通信与半导体行业知名企业高管、CIO、信息化与数字化负责人,交流电子通信与半导体行业的创新的产品和解决方…

【排序】js简单实现前端数组排序,多字段数组对象排序,字符串排序,数字排序等

数组对象排序(多字段排序) 排序前: 排序后: data() {return {list: [{ks: 外科,child_ks: 泌尿外科,xz: 外科一组,doctor: 小明,num: 18,num2: 19,num3: 20},{ks: 中医科,child_ks: 中医男科,xz: 外科一组,doctor: 小红,num: …

Hadoop、Hive安装

一、 工具 Linux系统:Centos,版本7.0及以上 JDK:jdk1.8 Hadoop:3.1.3 Hive:3.1.2 虚拟机:VMware mysql:5.7.11 工具下载地址: https://pan.baidu.com/s/1JYtUVf2aYl5–i7xO6LOAQ 提取码: xavd…

ORACLE-递归查询、树操作

1. 数据准备 -- 测试数据准备 DROP TABLE untifa_test;CREATE TABLE untifa_test(child_id NUMBER(10) NOT NULL, --子idtitle VARCHAR2(50), --标题relation_type VARCHAR(10) --关系,parent_id NUMBER(10) --父id );insert into untifa_test (CHILD_ID, TITLE, RELATION_TYP…

SpringBoot整合Gateway 的Demo(附源码)

源码&#xff0c;可直接下载 Gateway模块 Gateway 的父pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…

vue核心面试题汇总【查缺补漏】

给大家推荐一个实用面试题库 1、前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;web前端面试题库 很喜欢‘万变不离其宗’这句话&#xff0c;希望在不断的思考和总结中找到Vue中的宗&#xff0c;来解答面试官抛出的…