微任务与宏任务

微任务和宏任务都是 JavaScript 中的任务队列,用于处理异步代码。

微任务是指在当前任务执行完成后立即执行的任务。常见的微任务包括 Promise 的回调函数、MutationObserver 的回调函数等。微任务会在浏览器的重绘前执行。

宏任务是指需要在当前任务队列执行完毕后再执行的任务。常见的宏任务包括 setTimeout、setInterval、I/O 操作等。宏任务会在浏览器的重绘前执行。

在 JavaScript 中,每个宏任务执行完毕后,会检查是否有微任务需要执行,如果有则立即执行微任务队列中的所有微任务。然后浏览器会进行页面的重绘。

例如,以下代码展示了微任务和宏任务的执行顺序:

console.log('1');setTimeout(function() {console.log('2');
}, 0);Promise.resolve().then(function() {console.log('3');
});console.log('4');

输出结果为:1, 4, 3, 2。

解释:

  1. 执行同步代码,输出 1。
  2. 遇到 setTimeout 宏任务,将其放入宏任务队列,继续执行同步代码,输出 4。
  3. 遇到 Promise.resolve().then 微任务,将其放入微任务队列。
  4. 宏任务执行完毕,检查微任务队列,发现有微任务,依次执行微任务队列中的微任务,输出 3。
  5. 微任务执行完毕,浏览器进行页面的重绘。
  6. 页面重绘完成后,执行宏任务队列中的下一个宏任务,即 setTimeout 回调函数,输出 2。

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

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

相关文章

信息安全管理体系

本文已收录至《全国计算机等级考试——信息 安全技术》专栏 信息安全管理体系(Information Security Management Systems)是组织在整体或特定范围内建立信息安全方针和目标,以及完成这些目标所用方法的体系。它是直接管理活动的结果&#xff…

JavaScript基础之运算符详解

运算符 算术运算符 算术运算符:也叫数学运算符,主要包括加、减、乘、除、取余(求模)等。算术运算符接收数值作为操作数并返回单个数值。数值可以是文字或变量。 运算符举例说明42 //返回6求和-4-2 //返回2求差*4*2 //返回8求积…

力扣经典题:用栈表示队列

1.在元素入栈完成时,再出栈进入到另一个栈的时候,另一个栈的栈顶元素就是队列的队尾元素 2.初始化操作完全与上一题相同 3.peek函数的实现:将1的思路写出来,再返回第二个队列的栈顶元素 4.pop函数就是将peek函数进行实现后将to…

[嵌入式软件][启蒙篇][仿真平台] STM32F103实现SPI控制OLED屏幕

上一篇: [嵌入式软件][启蒙篇][仿真平台] STM32F103实现LED、按键 [嵌入式软件][启蒙篇][仿真平台] STM32F103实现串口输出输入、ADC采集 [嵌入式软件][启蒙篇][仿真平台]STM32F103实现定时器 [嵌入式软件][启蒙篇][仿真平台] STM32F103实现IIC控制OLED屏幕 文章目…

HIS预约挂号系统源码 看病挂号快人一步

提到去大型医院机构就诊时,许多人都感到恐惧。有些人一旦走进医院的门诊大厅,就感到迷茫,既无法理解导医台医生的建议,也找不到应该去哪个科室进行检查。实际上,就医也是一门学问,如何优化时间分配&#xf…

AIGC专题:从0到1精益创新 AIGC产品应用及商业化落地实践

今天分享的是AIGC系列深度研究报告:《AIGC专题:从0到1精益创新 AIGC产品应用及商业化落地实践》。 (报告出品方:易点天下) 报告共计:38页 企业内部增效-AI知识库 企业内部IT、运维、人力资源、行政等等日…

都 2024 年了!程序员的到底出路在哪里!?继续卷技术?晋升管理层?还是转业?

都 2024 年了!程序员的到底出路在哪里!?继续卷技术?晋升管理层?还是转业? 1)程序员的难处2)程序员专业方向3)大数据3.1.大数据开发涉及到哪些技术3.2.大数据开发涉及到的…

C语言assert断言详解指针(3)

各位少年,大家好,我是博主那一脸阳光,今天分享assert法官的断言,指针宝箱的使用。 前言:如果你在计算机的世界中触犯了语法法规,那么编译器就要上线了,就会出现报错。然而想想我们在现实中设计到…

OpenAI Gym 中级教程----深入解析 Gym 代码和结构

Python OpenAI Gym 中级教程:深入解析 Gym 代码和结构 OpenAI Gym 是一个用于开发和测试强化学习算法的工具包。在本篇博客中,我们将深入解析 Gym 的代码和结构,了解 Gym 是如何设计和实现的,并通过代码示例来说明关键概念。 1.…

仰暮计划|“一周一顿的玉米面和白面蒸的糕点,是当时所能吃到的极好的食物”

平淡又记忆深刻的一生 口述人:元奶奶 整理人:宋佳音 口述人基本信息:女 出生于1958年,今年65周岁,祖籍东北,现定居于上海,已从制药厂退休十余年。 元奶奶的自述: 我出生于1958年…

B样条基函数

​定义:令U{u0,u1,…,um}是一个单调不减的实数序列,即ui≤ui1,i0,1,…,m-1。其中,ui称为节点,U称为节点矢量,用Ni,p(u)表示第i个p次(p1阶)B样条基…

asp.net core通过读取配置文件来动态生成接口

如果希望接口是每次通过配置文件生成的,这样设计一些低代码的方式来获得接口。 系统目录结构: 启动配置代码: using Microsoft.AspNetCore.Hosting; using System.Configuration; using System.Data.Entity; using Swashbuckle.AspNetCore.…

算法训练营day19,二叉树8-1

type TreeNode struct { Val int Left *TreeNode Right *TreeNode } 235. 二叉搜索树的最近公共祖先 //本题比昨天236二叉树的最近公共祖先 要容易一些,因为二叉搜索树是有序的 func lowestCommonAncestor(root, p, q *TreeNode) *TreeNode { if root nil {…

[Python] 什么是PCA降维技术以及scikit-learn中PCA类使用案例(图文教程,含详细代码)

什么是维度? 对于Numpy中数组来说,维度就是功能shape返回的结果,shape中返回了几个数字,就是几维。索引以外的数据,不分行列的叫一维(此时shape返回唯一的维度上的数据个数),有行列…

【学网攻】 第(14)节 -- 动态路由(EIGRP)

系列文章目录 目录 系列文章目录 文章目录 前言 一、动态路由EIGRP是什么? 二、实验 1.引入 实验步骤 实验拓扑图 实验配置 看到D开头是便是我们的EIGRP动态路由 总结 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学…

day36WEB攻防-通用漏洞XSS 跨站MXSSUXSSFlashXSSPDFXSS

本章知识点不是很重要,涉及到的漏洞也不是常见的,所以没有过多的阐述。 配套资源(百度网盘) 链接:https://pan.baidu.com/s/1xTp14wE-mqEr7EHU9nSCrg?pwdnlsg 提取码:nlsg MXSS突变型XSS漏洞 MXSS参考链接…

阿里云智能集团副总裁安筱鹏:企业数字化的终局是什么?

以下文章来源于数字化企业 ,作者安筱鹏博士 回答数字化终局追问的起点是,企业需要重新定义我是谁。成为有竞争力的行业领导厂商,你应当成为一个客户运营商,即能够实时洞察、实时满足客户需求,追求极致的客户体验。而要…

版本管理工具git: 谨慎使用git中的撤回操作

文章目录 一、背景二、解决方案1、步骤一2、步骤二 三、参考 一、背景 昨天代码分支提交错了,idea中使用了如下操作,结果代码不见了 二、解决方案 1、步骤一 使用git reflog命令,查看提交记录,找到之前commit操作的哈希值 …

共享粒子群算法 优化svm 分类 代码实战

import numpy as np from sklearn import datasets from sklearn.model_selection import train_test_split from sklearn.svm import SVC from sklearn.metrics import accuracy_score # 加载数据集 iris datasets.load_iris() X iris.data y iris.target # 划分数据集 X…

pgsql中in 和 join 怎么选

前提: 两个表只有一个关联字段 IN的使用: 1、适用场景:当需要关联的数据量较小时(例如几十到几百条),使用IN是可以接受的。IN子句通常用于WHERE条件中,以指定某列的值是否在给定列表中。 2、性…