当前位置: 首页 > news >正文

javaScript中微任务宏任务详解

在 JavaScript 中,任务分为两种类型:微任务(Microtask)和宏任务(Macrotask)。它们的执行顺序以及在事件循环(Event Loop)中的位置不同。

微任务(Microtask):

  • 微任务通常由 Promise 的回调函数、MutationObserver 的回调函数、Node.js 中的 process.nextTick 等创建。
  • 微任务在当前任务执行完成后立即执行,不会被加入到下一个事件循环中。
  • 微任务的执行优先级高于宏任务。

宏任务(Macrotask):

  • 宏任务包括整体代码块、setTimeout、setInterval、I/O 操作等。
  • 宏任务会被加入到事件队列的末尾,在当前任务执行完成后执行。
  • 宏任务的执行顺序在微任务之后。

下面是一个示例来说明它们之间的执行顺序:

console.log(1)  const promise = new Promise((resolve, reject) => {  console.log(2);  setTimeout(() => {  resolve(3);  reject(4);  },0);  
});  promise.then((data) => {  console.log(data);  
}).catch((error)=> {  console.log(error);  
});  console.log(5);

输出结果

1
2
5
3

解析

  • js 执行代码是从上到下执行的,遇见微任务就添加到微任务队列,遇到宏任务就添加到宏任务队列(宏任务先于微任务执行,同层级微任务先于宏任务执行)
  • 首先执行 console.log(1),输出 1。
  • 接着执行 new Promise,在 Promise 函数中会立即执行 console.log(2),输出 2。
  • 在 Promise 函数中,使用 setTimeout 定时器注册一个回调函数延时时间为 0,该回调函数会被添加到宏任务队列中,等待下一次事件循环的执行。
  • 接着执行 promise.then 和 promise.catch 方法,但是由于 Promise 还未被解决或拒绝,因此这两个方法会被添加到微任务队列中,等待 Promise 状态的改变。
  • 接着执行 console.log(5),输出 5。
  • 由于微任务队列中有任务需要执行,因此在本次事件循环中,会先执行微任务队列中的任务。在微任务队列中,首先执行 promise.then 方法中的回调函数,输出 3。
  • 接着执行 promise.catch 方法中的回调函数,由于 Promise 已经被解决该回调函数不会被执行。

总之,事件循环中的微任务优先级高于宏任务,微任务会在当前任务执行完毕后立即执行,而宏任务则会在当前任务执行完毕后排队等待执行。

js微任务和宏任务有哪些

  • 微任务:Promise 回调函数、process.nextTick、Object.observe(已废弃)、MutationObserver。
  • 宏任务:setTimeout、setInterval、setImmediate(Node.js 独有)、requestAnimationFrame、I/O 操作、UI 渲染。

需要注意的是,不同的 JavaScript 引擎可能会存在一些差异,有些任务可能既可以作为微任务,也可以作为宏任务,比如在一些浏览器中,使用 MutationObserver 监听 DOM 变化时,它会被视为一个微任务,但是在一些 Node.js 版本中,它会被视为一个宏任务。 另外,需要注意的是,Promise 回调函数是微任务,但是它的内部代码可能会包含其他的异步操作,这些异步操作可能是微任务或宏任务,因此在处理 Promise 时需要考虑到它内部可能包含的其他异步操作。

相关文章:

javaScript中微任务宏任务详解

在 JavaScript 中,任务分为两种类型:微任务(Microtask)和宏任务(Macrotask)。它们的执行顺序以及在事件循环(Event Loop)中的位置不同。 微任务(Microtask)&…...

牛客小白月赛90

title: 牛客小白月赛90 date: 2024-04-05 21:37:01 tags: 赛后思考与总结 categories: 比赛 A 思路 按题意直接累加就行 代码 int n; cin >> n;int m; cin >> m;ll ans 0;vector<int> a(n 1);for(int i 1; i < n ; i ) cin >> a[i];for(int i …...

【51单片机入门记录】A/D、D/A转换器PCF859应用

目录 一、IIC初始化代码 二、开发板电路图 三、PCF8591读/写字节操作流程及相关函数 &#xff08;1&#xff09;PCF8591&#xff08;AD&#xff09;读操作流程及代码 &#xff08;2&#xff09;PCF8591&#xff08;AD&#xff09;写操作流程及代码 四、应用示例-显示电压…...

设计模式(13):模板方法模式

场景&#xff1a; 实现一个功能时&#xff0c;整体步骤很固定&#xff0c;但是&#xff0c;某些部分易变。易变部分可以抽象出来&#xff0c;供子类实现。 开发中常见的场景 非常繁琐&#xff0c;各个框架&#xff0c;类库中都有它的影子&#xff0c;比如常见的有&#xff1…...

公众号申请上限怎么提升

一般可以申请多少个公众号&#xff1f;众所周知&#xff0c;在2013年前后&#xff0c;公众号申请是不限制数量的&#xff0c;后来企业开始限制申请50个&#xff0c;直到2018年的11月tx又发布&#xff0c;其中个人主体可申请公众号由2个调整为1个&#xff0c;企业主体由50个调整…...

【算法刷题day16】Leetcode:104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数

104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 文档链接&#xff1a;[代码随想录] 题目链接&#xff1a;104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 状态&#xff1a;ok 题目&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二…...

电商技术揭秘一:电商架构设计与核心技术

文章目录 引言一、电商平台架构概述1.1 架构设计原则与架构类型选择1.2 传统电商平台架构与现代化架构趋势分析 二、高并发处理与负载均衡2.1 高并发访问特点分析与挑战2.2 负载均衡原理与算法选择 三、分布式数据库与缓存技术3.1 分布式数据库设计与一致性考量3.2 缓存策略与缓…...

Ubuntu 自启动应用程序的方法

1、自启动的方法 自启动应用程序可以在/etc/rc.local文件中调用脚本来启动应用程序&#xff0c;另外也可以自行编写一个服务来启动应用程序。这两种方法其实都是一种方法即使用服务来启动一个应用程序。rc.local脚本本身也是被一个rc.local的服务来调用的。如下图&#xff0c;可…...

Star GAN论文解析

论文地址&#xff1a;https://arxiv.org/pdf/1912.01865v1.pdf https://openaccess.thecvf.com/content_cvpr_2018/papers/Choi_StarGAN_Unified_Generative_CVPR_2018_paper.pdf 源码&#xff1a;stargan项目实战及源码解读-CSDN博客 1. 概述 在传统方法中&#x…...

全网最强JavaWeb笔记 | 万字长文爆肝JavaWeb开发——day06_数据库-MySQL-02

万字长文爆肝黑马程序员2023最新版JavaWeb教程。这套教程打破常规&#xff0c;不再局限于过时的老套JavaWeb技术&#xff0c;而是与时俱进&#xff0c;运用的都是企业中流行的前沿技术。笔者认真跟着这个教程&#xff0c;再一次认真学习一遍JavaWeb教程&#xff0c;温故而知新&…...

数据结构day2--双向链表

双向链表: 即可以从头遍历到尾部和从尾部遍历到头部的链表&#xff0c;每个结点包括两个链域&#xff1a;前驱指针域和后继指针域&#xff0c;所以比起单向链表&#xff0c;其可以在任意一个结点访问前后两个结点 关于双向链表的一个完整步骤为&#xff1a; 创建一个表头结构…...

蓝桥杯单片机真题实践篇

这里就不完全写思路过程代码什么的&#xff0c;这一篇文章就写我在训练真题中遇到的过程。 &#xff08;呜呜呜&#xff0c;时间不够辣&#xff0c;能做多少算多少吧....&#xff09; 十三届省赛题 问题1&#xff1a;数码管的数字消影不明显 &#xff08;参考&#xff1a;蓝…...

前端pdf.js将pdf转为图片,尤其适合电子发票打印

写这个的原因就是打电子发票不方便&#xff0c;这个代码是纯js不需要后端服务直接将两张电子发票的pdf转为两张图片渲染到一张A4纸上面&#xff08;完全不浪费&#xff0c;发票也不会变大&#xff09;&#xff0c;自动完成打印分页&#xff0c;点击打印即可。亲测可用所有电子发…...

第四百四十三回

文章目录 1. 概念介绍2. 思路与方法2.1 整体思路2.2 使用方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了"自定义Action菜单"相关的内容&#xff0c;本章回中将介绍如何获取屏幕相关参数.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本…...

一分钟快速用上号称“音乐版ChatGPT”的suno AI,适合普通人的超简单教程!

随着AI的应用变广&#xff0c;各类AI程序已逐渐普及。AI已逐渐深入到人们的工作生活方方面面。而AI涉及的行业也越来越多&#xff0c;从最初的写作&#xff0c;到医疗教育&#xff0c;再到现在的音乐。 Suno是一个专业高质量的AI歌曲和音乐创作平台&#xff0c;用户只需输入简…...

干货!一文读懂:位像素海外仓系统的分销功能

随着跨境电商的蓬勃发展&#xff0c;海外仓系统的重要性日益凸显&#xff0c;成为企业在激烈市场竞争中脱颖而出的关键。当谈及海外仓系统的拓展功能&#xff0c;特别是其中的分销功能&#xff0c;正逐渐成为卖家们不可或缺的工具。 那么&#xff0c;这个神奇的分销功能究竟是…...

【洛谷】P1449 后缀表达式

题目描述 所谓后缀表达式是指这样的一个表达式&#xff1a;式中不再引用括号&#xff0c;运算符号放在两个运算对象之后&#xff0c;所有计算按运算符号出现的顺序&#xff0c;严格地由左而右新进行&#xff08;不用考虑运算符的优先级&#xff09;。 本题中运算符仅包含 -*…...

【MySQL】聚合函数和分组聚合

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习计网、mysql和算法 ✈️专栏&#xff1a;MySQL学习 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac…...

RDD算子(四)、血缘关系、持久化

1. foreach 分布式遍历每一个元素&#xff0c;调用指定函数 val rdd sc.makeRDD(List(1, 2, 3, 4)) rdd.foreach(println) 结果是随机的&#xff0c;因为foreach是在每一个Executor端并发执行&#xff0c;所以顺序是不确定的。如果采集collect之后再调用foreach打印&#xf…...

51之定时器与中断系统

目录 1.定时器与中断系统简介 1.1中断系统 1.2定时器 1.2.1定时器简介 1.2.2定时器大致原理及其配置 1.2.3定时器所需的所有配置总介 2.定时器0实现LED闪烁 3.使用软件生成定时器初始化程序 1.定时器与中断系统简介 1.1中断系统 首先&#xff0c;我们需要来了解一下什么…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...