【Promise】JS 异步之宏队列与微队列

文章目录

  • 1 原理图
  • 2 说明
  • 3 相关面试题
    • 3.1 面试题1
    • 3.2 面试题2
    • 3.3 面试题3
    • 3.4 面试题4

1 原理图

2 说明

  • JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列：宏队列和微队列。
  • 宏队列：用来保存待执行的宏任务(回调)，比如：定时器回调 / DOM事件回调 / ajax 回调。
  • 微队列：用来保存待执行的微任务(回调)，比如：promise的回调 / MutationObserver的回调。
  • JS 执行时会区别这 2 个队列：
    • JS 引擎首先必须先执行所有的初始化同步任务代码。
    • 每次准备取出第一个宏任务执行前，都要将所有的微任务一个一个取出来执行。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>10_宏队列与微队列</title>
</head><body><script>setTimeout(() => { //会立即放入宏队列console.log('timeout callback1()'); //后1Promise.resolve(3).then(value => { //会立即放入微队列//每次取出宏任务前需要把所有的微任务处理掉console.log('Promise onResolved3()', value); //timeout callback2()之前})}, 0);setTimeout(() => { //会立即放入宏队列console.log('timeout callback2()'); //后2}, 0);Promise.resolve(1).then(value => { //会立即放入微队列console.log('Promise onResolved1()', value); //先1})Promise.resolve(1).then(value => { //会立即放入微队列console.log('Promise onResolved2()', value); //先2})</script>
</body></html>

3 相关面试题

3.1 面试题1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>11_Promise相关面试题1</title>
</head><body><script type="text/javascript">setTimeout(() => { //放入宏队列 4console.log(1);}, 0)Promise.resolve().then(() => { //放入微队列 2console.log(2);})Promise.resolve().then(() => { //放入微队列 3console.log(4);})console.log(3); //同步代码 1//输出：3 2 4 1</script>
</body></html>

3.2 面试题2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>11_Promise相关面试题2</title>
</head><body><script type="text/javascript">setTimeout(() => { //放入宏队列console.log(1);}, 0)new Promise((resolve) => {console.log(2); //同步执行resolve();}).then(() => { //放入微队列console.log(3);}).then(() => { //上面是pending状态，将此回调函数先存在callbacks中，3执行后放4console.log(4);})console.log(5); //同步执行//输出：2 5 3 4 1/*** 宏: [1]*     []* 微: [3]*     [4]*     []*/</script>
</body></html>

3.3 面试题3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>11_Promise相关面试题3</title>
</head><body><script type="text/javascript">const first = () => (new Promise((resolve, reject) => {console.log(3); //同步let p = new Promise((resolve, reject) => {console.log(7); //同步setTimeout(() => { //放入宏队列console.log(5);resolve(6);}, 0)resolve(1); //p成功})resolve(2); //first()成功p.then((arg) => { //放入微队列console.log(arg); //1})}))first().then((arg) => { //放入微队列console.log(arg); //2})console.log(4); //同步//3 7 4 1 2 5/*** 宏: [5]* 微: [1, 2]*/</script>
</body></html>

3.4 面试题4

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>11_Promise相关面试题4</title>
</head><body><script type="text/javascript">setTimeout(() => { //放入宏队列console.log("0");}, 0)new Promise((resolve, reject) => {console.log("1"); //立刻执行resolve();}).then(() => { //放入微队列 return undefinedconsole.log("2");new Promise((resolve, reject) => {console.log("3"); //3resolve();}).then(() => { //放入微队列console.log("4");}).then(() => { //.then()执行，内部缓存回调函数，然后外层.then()执行完毕console.log("5");})}).then(() => { //放入微队列console.log("6");})new Promise((resolve, reject) => {console.log("7");resolve();}).then(() => { //放入微队列console.log("8");})//1 7 2 3 8 4 6 5 0/*** 宏: [0]*     []* 微: [2对应的回调函数, 8]*     [8, 4, 6]*     [4, 6]*     [6, 5]*     [5]*     []*/</script>
</body></html>

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

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

相关文章

用 Python 从零开始创建神经网络（二）：第一个神经元的进阶

用 Python 从零开始创建神经网络（二）：第一个神经元的进阶

第一个神经元的进阶 引言1. Tensors, Arrays and Vectors&#xff1a;2. Dot Product and Vector Additiona. Dot Product &#xff08;点积&#xff09;b. Vector Addition &#xff08;向量加法&#xff09; 3. A Single Neuron with NumPy4. A Layer of Neurons with NumPy5…
阅读更多...
【优选算法 — 滑动窗口】最大连续1的个数 将 x 减到0的最小操作数

【优选算法 — 滑动窗口】最大连续1的个数 将 x 减到0的最小操作数

最大连续1的个数 最大连续1的个数 题目描述 题目解析 给我们一个元素全是0或者1的数组&#xff0c;和一个整数 k &#xff0c;然后让我们在数组选出最多的 k 个0&#xff1b;这里翻转最多 k 个0的意思&#xff0c;是翻转 0 的个数< k&#xff0c;而不是一定要翻转 k …
阅读更多...
各种排序分组

各种排序分组

简易排序方法如下: public static void XX(){var circles Z.db.SelectEntities<Circle>();circles circles.OrderByDescending(x > x.Center.Y).ThenBy(x > x.Center.X).ToList();for (int i 0; i < circles.Count; i){DBText text new DBText() { Positi…
阅读更多...
RK3288 android7.1 适配 ilitek i2c接口TP

RK3288 android7.1 适配 ilitek i2c接口TP

一&#xff0c;Ilitek 触摸屏简介 Ilitek 提供多种型号的触控屏控制器&#xff0c;如 ILI6480、ILI9341 等&#xff0c;采用 I2C 接口。 这些控制器能够支持多点触控&#xff0c;并具有优秀的灵敏度和响应速度。 Ilitek 的触摸屏控制器监测屏幕上的触摸事件。 当触摸发生时&am…
阅读更多...
DICOM图像知识：DICOM图像排序与坐标系解析

DICOM图像知识：DICOM图像排序与坐标系解析

目录 引言 1. 概述 2. DICOM图像排序规则 2.1 Patient的Study按Study Date排序 2.2 Study的Series按Series Number排序 2.3 Series的SOP按Instance Number或Slice Location排序 2.3.1 Instance Number排序 2.3.2 Slice Location排序 2.3.3 使用Image Position (Patien…
阅读更多...
Js — 定时器

Js — 定时器

有两种&#xff1a;setInterval 和 setTimeout 间隔时间单位为毫秒 setInterval 每隔指定的毫秒数重复执行一个函数或代码 开启定时器&#xff1a;setInterval(函数&#xff0c;间隔时间) 作用&#xff1a;每隔一段时间调用这个函数 注意&#xff1a;它不是立即执行&#x…
阅读更多...
其他教程：如何设计一个App扫码登录功能，来实现免账号密码登录功能，仅供参考

其他教程：如何设计一个App扫码登录功能，来实现免账号密码登录功能，仅供参考

–本次教程是给大家列举一下常见的扫码登录功能&#xff0c;小程序或app均可参考&#xff0c;如需更安全的模式可多次设计加工&#xff0c;本次只列举概念层面的实现方式
阅读更多...
ChatGPT键盘快捷键（按ctrl + /呼出）

ChatGPT键盘快捷键（按ctrl + /呼出）

文章目录 ChatGPT键盘快捷键- 打开新聊天: Ctrl Shift O- 聚焦聊天输入: Shift Esc- 复制最后一个代码块: Ctrl Shift ;- 复制最后一个回复: Ctrl Shift C- 设置自定义指令: Ctrl Shift I- 切换边栏: Ctrl Shift S- 删除聊天: Ctrl Shift ⌫- 显示快捷方式: Ctrl …
阅读更多...
AWTK-HarmonyOS NEXT 发布

AWTK-HarmonyOS NEXT 发布

AWTK 全称为 Toolkit AnyWhere&#xff0c;是 ZLG 倾心打造的一套基于 C 语言开发的 GUI 框架。旨在为用户提供一个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的 GUI 引擎&#xff0c;支持跨平台同步开发&#xff0c;一次编程&#xff0c;到处编译&#xff0c;跨平台使…
阅读更多...
【开发】Java的内存溢出

【开发】Java的内存溢出

Java之内存溢出 Java之内存溢出 | OutOfMemoryError 我们都知道&#xff0c;在Java的世界里&#xff0c;由JVM管理着Java中的“垃圾对象”&#xff0c;也就是不被引用的对象&#xff1b;当一个对象不被其它对象引用的时候&#xff0c;该对象就会被垃圾回收器清理掉。但是在某些…
阅读更多...
EasyExcel的AbstractColumnWidthStyleStrategy注入CellStyle不生效

EasyExcel的AbstractColumnWidthStyleStrategy注入CellStyle不生效

设置背景色 CellStyle style workbook.createCellStyle();style.setFillForegroundColor(IndexedColors.RED.getIndex()); // 是设置前景色不是背景色style.setFillPattern(FillPatternType.SOLID_FOREGROUND)EasyExcel.writerTable(0).head(Head1.class).registerWriteHandl…
阅读更多...
【51单片机】LED点阵屏 原理 + 使用

【51单片机】LED点阵屏 原理 + 使用

学习使用的开发板&#xff1a;STC89C52RC/LE52RC 编程软件&#xff1a;Keil5 烧录软件&#xff1a;stc-isp 开发板实图&#xff1a; 文章目录 LED点阵屏显示原理74HC595 编码LED点阵屏显示笑脸LED点阵屏显示动画 LED点阵屏 点阵屏在开发板的右上角&#xff0c;注意使用前需要…
阅读更多...
深度学习-张量相关

深度学习-张量相关

一. 张量的创建 张量简介 张量是pytorch的基本数据结构 张量&#xff0c;英文为Tensor&#xff0c;是机器学习的基本构建模块&#xff0c;是以数字方式表示数据的形式。 例如&#xff0c;图像可以表示为形状为 [3, 224, 224] 的张量&#xff0c;这意味着 [colour_channels, h…
阅读更多...
使用vite构建一个react网站，并部署到Netlify上

使用vite构建一个react网站，并部署到Netlify上

这篇教程中&#xff0c;我会教你如何用vite快速构建一个react网站&#xff0c;并把网站免费部署到Netlify上&#xff0c;让别人可以经由网址访问你的react网站。 1. 使用vite构建基础框架 npm create vitelatestcd vite-project npm install npm run dev2. 网站内容设计 3. 构…
阅读更多...
Fastify Swagger：自动化API文档生成与展示

Fastify Swagger：自动化API文档生成与展示

在现代软件开发中&#xff0c;API文档的生成和维护是一个不可或缺的环节。Fastify Swagger 是一个专为 Fastify 框架设计的插件&#xff0c;它能够自动生成符合 Swagger&#xff08;OpenAPI v2 或 v3&#xff09;规范的文档&#xff0c;从而帮助开发者轻松创建和维护API文档。本…
阅读更多...
【网络原理】万字详解 UDP 和 TCP

【网络原理】万字详解 UDP 和 TCP

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. UDP1.1 UDP 报文格式1.1.1 源端口/目的端口1.1.2 报文长度1.1.3 校验和 2. TCP2.1 TCP 报文结构2.2 TCP 特…
阅读更多...
Go 中的泛型，日常如何使用

Go 中的泛型，日常如何使用

泛型从 go 的 1.18 开始支持 什么是泛型编程 在泛型出现之前&#xff0c;如果需要计算两数之和&#xff0c;可能会这样写&#xff1a; func Add(a, b int) int {returb a b } 这个很简单&#xff0c;但是只能两个参数都是 int 类型的时候才能调用 如果想要计算两个浮点数…
阅读更多...
IoTDB 与 HBase 对比详解：架构、功能与性能

IoTDB 与 HBase 对比详解：架构、功能与性能

五大方向&#xff0c;洞悉 IoTDB 与 HBase 的详尽对比&#xff01; 在物联网&#xff08;IoT&#xff09;领域&#xff0c;数据的采集、存储和分析是确保系统高效运行和决策准确的重要环节。随着物联网设备数量的增加和数据量的爆炸式增长&#xff0c;开发者和决策者们需要选择…
阅读更多...
单片机串口接收状态机STM32

单片机串口接收状态机STM32

单片机串口接收状态机stm32 前言 项目的芯片stm32转国产&#xff0c;国产芯片的串口DMA接收功能测试不通过&#xff0c;所以要由原本很容易配置的串口空闲中断触发DMA接收数据的方式转为串口逐字节接收的状态机接收数据 两种方式各有优劣&#xff0c;不过我的芯片已经主频跑…
阅读更多...
词嵌入方法（Word Embedding）

词嵌入方法（Word Embedding）

词嵌入方法&#xff08;Word Embedding&#xff09; Word Embedding是NLP中的一种技术&#xff0c;通过将单词映射到一个空间向量来表示每个单词 ✨️常见的词嵌入方法&#xff1a; &#x1f31f;Word2Vec&#xff1a;由谷歌提出的方法&#xff0c;分为CBOW&#xff08;conti…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023