前端 JS 经典:宏任务、微任务、事件循环(EventLoop)

1. 前言概览

js 是一门单线程的非阻塞的脚本语言

单线程:只有一个主线程处理所有任务

非阻塞:有异步任务,主线程挂起这个任务,等异步返回结果再根据一定规则执行

 2. 宏任务与微任务

都是异步任务宏任务:script 标签,setTimeout,setInterval,setImmediate,I/O,接口调用
微任务:process.nextTick,Promise.then() catch(),Async/Await,Object.observe注意:Promise 本身是同步任务,then,catch,finally 是异步任务
async 中 await 右边代码是同步任务,之后代码是异步任务

3. 事件循环

主线程执行顺序:一个宏任务(script 标签)-> 同步任务 -> 微任务 -> 一个宏任务 -> 宏任务中的微任务(如果有) -> 下一个宏任务 -> ..... 直到 js 事件执行完成。

4. 经典案例

async function async1(){console.log('1') // 同2await async2()console.log('2') // 微1
}
async function async2(){console.log('3') // 同3
}
console.log('4') // 同1
setTimeout(function(){console.log('5') // 宏1
},0)
setTimeout(function(){console.log('6') // 宏2
},3)
async1();
new Promise(function(resolve){console.log('7') // 同4resolve();console.log('8') // 同5
}).then(function(){console.log('9') // 微2
})
console.log('10') // 同6
// 输出:4,1,3,7,8,10,2,9,5,6

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

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

相关文章

每日一题 274. H 指数(中等)

先讲一下自己的复杂的写法 第一眼最大最小值问题,直接在0和最大被引次数之间二分找答案先排序,再二分,,, 正解: 排序得到 citations 的递减序列,通过递增下标 i 遍历该序列显然只要排序后的 …

102.linux5.15.198 编译 firefly-rk3399(1)

1. 平台: rk3399 firefly 2g16g 2. 内核:linux5.15.136 (从内核镜像网站下载) 3. 交叉编译工具 gcc version 7.5.0 (Ubuntu/Linaro 7.5.0-3ubuntu1~18.04) 4. 宿主机:ubuntu18.04 5. 需要的素材和资料&#xff…

人工智能(AI)在医疗领域的应用

人工智能(AI)在医疗领域的应用 人工智能(AI)在医疗领域的应用近年来得到了广泛的关注。其中,AI辅助治疗疾病的技术成为了研究热点。本文将介绍AI辅助治疗疾病的技术,包括其定义、应用场景、案例分析和发展…

Kafka集群

Kafka集群 1、Kafka 概述1.1消息队列背景1.2类型1.3Kafka 定义1.4Kafka 简介 2、消息队列好处3、消息队列的模式4、Kafka 的特性5、Kafka 系统架构4、部署 kafka 集群4.1下载安装包4.2 安装 Kafka4.2.1 修改配置文件4.2.2 修改环境变量4.2.3 配置 zookeeper启动脚本4.2.4 设置…

垃圾收费站

使用form-data传递数组和x-www-form-urlencoded传递的区别 项目场景: 我将后端接口的一个接收参数设计成了数组,然后前端使用form-data去传递 问题描述 访问的时候出现了问题,后端接收到的数组多出了一层中括号,也就是被两层中括号…

黑猪肉经营配送商城小程序商城效果怎样

对产品商家来说,如今线下流量匮乏难以增长,线上已经成为商家们重要的经营渠道,但入驻第三方平台也存在诸多痛点,因此更多企业品牌商家选择自建私域卖货平台完善更多生意。 微信作为私域主阵地,自然是企业们不可错过的…

论文-分布式-并发控制-并发控制问题的解决方案

目录 参考文献 问题 解法与证明 易读版本 参考文献 Dijkstra于1965年发表文章Solution of a Problem in Concurrent Programming Control,引出并发系统下的互斥(mutual exclusion)问题,自此开辟了分布式计算领域Dijkstra在文中给出了基于共享存储原子…

Linux——文件权限属性和权限管理

文件权限属性和权限管理 本章思维导图: 注:本章思维导图对应的Xmid文件和.png文件都以传到“资源” 文章目录 文件权限属性和权限管理1. sudo提权和sudoers文件1.1 sudo提权和成为root的区别 2. 权限2.1 Linux群体2.1.1 为什么要有所属组2.1.2 修改文件…

深入理解Linux网络笔记(五):深度理解本机网络IO

本文为《深入理解Linux网络》学习笔记,使用的Linux源码版本是3.10,网卡驱动默认采用的都是Intel的igb网卡驱动 Linux源码在线阅读:https://elixir.bootlin.com/linux/v3.10/source 4、深度理解本机网络IO 1)、跨机网络通信过程 …

【笔录】TVP技术沙龙:寻宝AI时代

目录 引言大模型的应用案例大模型三问模型落地可行性考量维度AIGC的几个可行应用方向AIGC的存储LLM工程应用范式演进LLM编程协作范式变化 引言 大模型是10倍的机会,但并不是平均主义的机会,没有低垂的果实。 企业想在大模型的赛道上跑出成绩,…

光谱图像论文浅读

文章目录 Hyperspectral Image Super-Resolution via Deep Spatiospectral Attention Convolutional Neural Networks Hyperspectral Image Super-Resolution via Deep Spatiospectral Attention Convolutional Neural Networks 通过上采样高光谱保留其光谱特征,采用…

【实用网站分享】

1、PyDebloatX https://pydebloatx.com/pydebloatx 是一种用于 Windows 操作系统的 Python 脚本,用于卸载 Windows 10 系统中的预装应用和系统组件,以便提高系统性能和释放磁盘空间。它是 Debloat Windows 10 脚本的一个分支,但具有更友好和…

WPF:自定义按钮模板

1.WPF:自定义按钮模板 自定义封装的按钮属性可写在<Button.Template>中 Background"{TemplateBinding Background}"中的TemplateBinding代表使用按钮本身所使用的背景颜色 不在样式内修改背景颜色 例如&#xff1a; <Button Width"300" Height&q…

202212 青少年等级考试机器人实操真题三级

202212 青少年等级考试机器人实操真题三级 考试时间&#xff1a;60分钟 总分&#xff1a;100 及格分&#xff1a;60 一、问答题 (共1题&#xff0c;每题100分) 1、实际操作(共1题&#xff0c;共100分) 请考生在实操考试结束前将本题作答程序文件按“说明”要求完成上传。 1. 主…

vscode连接服务器一直retry

解决方法 打开vscode控制面板&#xff0c;输入命令remote-ssh: kill vs code server on host 选择一直连接不上的服务器端口 重新连接

【鸿蒙软件开发】Stage模型开发概述应用/组件级配置

文章目录 前言一、基本概念1.1 UIAbility 组件1.2 ExtensionAbility 组件1.3 Context1.4 AbilityStage1.5 Stage模型开发流程应用组件开发了解进程模型了解线程模型应用配置文件 二、Stage模型应用/组件级配置2.1 为什么需要这个操作2.2 应用包名配置2.3 应用图标和标签配置2.4…

人工智能在疾病治疗中的应用:机遇与挑战

人工智能在疾病治疗中的应用&#xff1a;机遇与挑战 随着人工智能技术的飞速发展&#xff0c;其在诸多领域的应用价值日益显现。本文将探讨人工智能技术在疾病治疗中的应用&#xff0c;包括其背景意义、技术概述、具体应用、发展前景以及总结。 一、背景意义 随着医学技术的…

leetCode 169. 多数元素 + 摩尔投票法

169. 多数元素 - 力扣&#xff08;LeetCode&#xff09; 给定一个大小为 n 的数组 nums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。你可以假设数组是非空的&#xff0c;并且给定的数组总是存在多数元素。 class Solution { publ…

【SPSS】基于RFM+Kmeans聚类的客户分群分析(文末送书)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…

一文解决:Swagger API 未授权访问漏洞问题

Swagger 是一个用于设计、构建、文档化和使用 RESTful 风格的 Web 服务的开源软件框架。它通过提供一个交互式文档页面&#xff0c;让开发者可以更方便地查看和测试 API 接口。然而&#xff0c;在一些情况下&#xff0c;未经授权的访问可能会导致安全漏洞。本文将介绍如何解决 …