【前端学习——js篇】5.事件循环

news2024/9/28 15:21:10

详细:https://github.com/febobo/web-interview

5.事件循环

js是一种单线程语言,同一时间内只能做一件事情,为了避免单线程阻塞的方法就是事件循环。

在javascript当中,所有的任务都可以分为:

  • 同步任务:按顺序执行的任务,一个任务的执行必须等待前一个任务的完成。同步任务一般会直接进入主线程执行。

  • 异步任务:不按顺序执行的任务,可以在后台执行,不会阻塞代码的执行。比如:ajax网络请求,setTimeout,setinterval定时函数等,Promiseasync/await等。


在这里插入图片描述

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

①宏任务与微任务

在JavaScirpt当中,宏任务(macrotask)和微任务(microtask)是异步任务的两种类型,它们有不同的执行时机和优先级。

宏任务(macrotask)

  • 宏任务代表的是一组任务的执行,可以看作是每一个独立的、完整的任务。

  • 常见的宏任务包括整体的代码块(scirpt)、setTimeout、setInterval、I/O操作、UI渲染等。

  • 当执行栈中的任务执行完毕后,js运行时会检查是否有宏任务需要执行,然后选择一个宏任务执行,执行完后再次清空执行栈。


微任务(microtask)

  • 相对于更“细粒度”的任务,执行时机位于当前任务执行结束后、下一个宏任务开始之前。

  • 常见的微任务包括Promise的处理、MutationObserver变动观察器等。

  • 微任务通常用于处理异步操作的结构,其优先级高于宏任务,及在当前宏任务执行完毕后,会优先执行微任务队列中的任务,直到微任务队列为空,才会执行下一个宏任务。


在执行顺序上,JavaScript 的事件循环(Event Loop)会先执行当前执行栈中的任务,然后检查是否有微任务需要执行,如果有,会依次执行微任务队列中的所有任务,直到微任务队列为空;最后再执行下一个宏任务。这样的循环过程不断重复,直到所有任务执行完毕。

在这里插入图片描述

console.log(1)

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

new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})

console.log(3)

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

1.console.log(1):首先会打印出 1,因为这是同步代码,会立即执行并输出 12.遇到 setTimeout,会将回调函数推入宏任务队列,等待当前执行栈清空后执行。

3.遇到 Promise 对象,会立即执行 Promise 的构造函数中的代码,输出 new Promise(1)紧接着,resolve() 会立即执行,表示 Promise 状态变为 resolved,进入 then 方法的回调链。
   (2)由于 Promise 的状态是 resolved,所以 then 方法中的回调函数会被放入微任务队列中等待执行。
   (3)接着会打印出 3,因为这是同步代码,会立即执行并输出 34.此时宏任务执行完成,开始执行微任务队列执行 then 方法,输出 then

5. 当一次宏任务执行完,再去执行新的宏任务,这里就剩一个定时器的宏任务了,执行它,输出 2

结果是:1=>'new Promise'=> 3 => 'then' => 2

详情可见Jake的博客:Tasks, microtasks, queues and schedules,这篇文章非常经典。

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

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

相关文章

Java Swing游戏开发学习19

内容来自RyiSnow视频讲解 这一节讲的是**Entity ArrayList(Render Order Revised)**实体数组列表(渲染顺序修改)。 前言 由于NPC和player的实体碰撞区域比他们本身的大小要小,所以会造成一个bug,当前的绘制顺序是,NP…

进程的基础知识

1).进程:一个正在运行中的程序; 2).PCB:进程控制块,进程描述符(PID:进程唯一的标识符) 进程控制块是用一个结构体struct task_struct来实现; 3).进程的状态: 就绪,阻塞,运行; 时间片轮转调度; 时间片轮转调度是一种最古老,最简单,最公平且使用最广的…

一文即可帮助你认识进程和线程~

本文的重点:什么是:进程、进程调度、线程和他们之间的联系。主讲概念知识,不讲代码实现 目录 一、认识进程 1.什么是进程 2.进程的信息 3.进程调度(***) 4.进程调度的基本过程 二、线程 1.线程的引入 2.什么是线程 3.进程于线程的联…

鸿蒙开发之ArkUI组件常用组件图片和文本

ArkUI即方舟开发框架是HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。 开发文档地址 &…

【功能实现】新年贺卡(蓝桥)

题目分析: 想要实现一个随机抽取功能 功能拆解:题目给了数组,我们采用生成随机数的方式,随机数作为数组的索引值访问数组的值。 并返回获取到的值,将获取到的值插入到页面中。 document.addEventListener(DOMConten…

Diffusion添加噪声noise的方式有哪些?怎么向图像中添加噪声?

添加噪声的方式大致分为两种,一种是每张图像在任意timestep都加入一样的均匀噪声,另一种是按照timestep添加不同程度的噪声 一、在任意timestep都加入一样的noise batch_size 32x_start torch.rand(batch_size,3,256,256) noise torch.randn_like(x_…

【spring】@Autowired注解学习

Autowired介绍 Spring框架是Java领域中一个非常重要的企业级应用开发框架,它提供了全面的编程和配置模型,旨在帮助开发者更快速、更简单地创建应用程序。在Spring框架中,Autowired是一个非常重要的注解,它用于实现依赖注入&#…

保研线性代数机器学习基础复习1

1.什么是代数(algebra)? 为了形式化一个概念,构建出有关这个概念的符号以及操作符号的公式。 2.什么是线性代数(linear algebra)? 一项关于向量以及操作向量的公式的研究。 3.举一些向量的例子&#x…

我的编程之路:从非计算机专业到Java开发工程师的成长之路 | 学习路线 | Java | 零基础 | 学习资源 | 自学

小伙伴们好,我是「 行走的程序喵」,感谢您阅读本文,欢迎三连~ 😻 【Java基础】专栏,Java基础知识全面详解:👉点击直达 🐱 【Mybatis框架】专栏,入门到基于XML的配置、以…

C语言运算符和表达式——赋值运算符

目录 变量的定义 赋值运算符 赋值表达式 如何给变量赋值 变量的定义 声明变量的名字和类型 变量的类型决定了 *占用内存空间的大小 *数据的存储形式 *合法的表数范围 *可参与的运算种类 *变量名标识了内存中的一个存储单元 问题:未被初始化的变量的值是什么&a…

yolov8 pose keypoint解读

yolov8进行关键点检测的代码如下: from ultralytics import YOLO# Load a model model YOLO(yolov8n.pt) # pretrained YOLOv8n model# Run batched inference on a list of images results model([im1.jpg, im2.jpg]) # return a list of Results objects# Pr…

PCL拟合并绘制平面(二)

使用RANSAC拟合点云平面 1、C实现2、效果图 普通的点云平面拟合方式在一般情况下可以得到较好的平面拟合效果,但是容易出现平面拟合错误或是拟合的平面不是最优的情况。此时就需要根据自己的实际使用情况,调整平面拟合的迭代次数以及收敛条件。 使用RAN…

浏览器工作原理与实践--调用栈:为什么JavaScript代码会出现栈溢出

在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript引擎先会对其进行编译,并创建执行上下文。但是并没有明确说明到底什么样的代码才算符合规范。 那么接下来我们就来明确下,哪些情况下代码才算是“一段”代码&am…

TheMoon 恶意软件短时间感染 6,000 台华硕路由器以获取代理服务

文章目录 针对华硕路由器Faceless代理服务预防措施 一种名为"TheMoon"的新变种恶意软件僵尸网络已经被发现正在侵入全球88个国家数千台过时的小型办公室与家庭办公室(SOHO)路由器以及物联网设备。 "TheMoon"与“Faceless”代理服务有关联,该服务…

46秒AI生成真人视频爆火,遭在线打假「换口型、声音」

ChatGPT狂飙160天,世界已经不是之前的样子。 新建了人工智能中文站 每天给大家更新可用的国内可用chatGPT资源 更多资源欢迎关注 是炒作还是真正的 AI 视频能力进化? AI 生成视频已经发展到这个程度了吗? 前段时间,英国王室凯特…

每天能提醒自己做事的app有哪个?

在忙碌的日常生活和工作中,我们时常面临各种任务和琐事。一旦处理不及时,很容易导致遗忘,进而给自己带来不必要的麻烦和损失。因此,拥有一款能够高效提醒我们做事的提醒app显得尤为重要。 敬业签就是这样一款实用的提醒软件。它不…

零基础10 天入门 Web3之第1天

10 天入门 Web3 Web3 是互联网的下一代,它将使人们拥有自己的数据并控制自己的在线体验。Web3 基于区块链技术,该技术为安全、透明和可信的交易提供支持。我准备做一个 10 天的学习计划,可帮助大家入门 Web3: 想要一起探讨学习的…

【氮化镓】位错对氮化镓(GaN)电子能量损失谱(EEL)的影响

本文献《Influence of dislocations on electron energy-loss spectra in gallium nitride》由C. J. Fall等人撰写,发表于2002年。研究团队通过第一性原理计算,探讨了位错对氮化镓(GaN)电子能量损失谱(EEL)…

python——修改注册表

如图:想要修改Public的值为2.2.1.1 import winreg# 定义要修改的键和新值 key_path rSOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList key_name Public new_name 2.2.1.1# 打开指定的键 # 注意此处是注册表路径拼接,此处是HKEY_LOCAL_MACH…

docker部署ubuntu

仓库: https://hub.docker.com/search?qUbuntu 拉一个Ubuntu镜像 docker pull ubuntu:18.04 查看本地镜像: docker images 运行容器 docker run -itd --name ubuntu-18-001 ubuntu:18.04 通过ps命令可以查看正在运行的容器信息 docker ps 进入容器 最…