【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，一经查实，立即删除！

相关文章

递推经典例题 - 爬楼梯

递推经典例题 - 爬楼梯

一、题目阅读 题目描述 一段楼梯有n级台阶。你每次可以跨一个、两个或者三个台阶。 请问走上n级台阶有几种方案&#xff1f;答案对998244353取模。 输入格式 一行一个数n。 输出格式 一行一个数&#xff0c;表示方案数。 样例 Input 1 3 Output 1 4 样例解释 1 1 1 3 1 2 …
阅读更多...
用 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…
阅读更多...
svgicon大小问题（简单记录

svgicon大小问题（简单记录

Prob.: reactts下用类似import XxxIcon from "../icons/xxx.svg语句之后使用< XxxICon >标签&#xff0c;不能直接用style指定大小 &#xff08;viewbox好像是有效的&#xff0c;height和width类似只改了画布大小&#xff0c;没缩放里面的path&#xff09; 过程: 前…
阅读更多...
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…
阅读更多...
Vector和ArrayList

Vector和ArrayList

Vector和ArrayList都是Java集合框架中的一部分&#xff0c;它们提供了动态数组的功能&#xff0c;但在实现和使用场景上存在一些差异。以下是对Vector和ArrayList的详细比较&#xff1a; 一、线程安全性 Vector&#xff1a; 是线程安全的。Vector类的所有方法都使用了synchron…
阅读更多...
css多列布局用法

css多列布局用法

文章目录 CSS多列布局详解与代码案例一、CSS多列布局介绍特点 二、CSS多列布局的用法1. 列数和宽度控制2. 列间距和规则3. 跨列和分列内容4. 列宽度自动调整5. 垂直对齐 三、CSS多列布局的代码案例示例一&#xff1a;基础多列布局示例二&#xff1a;响应式多列布局 CSS多列布局…
阅读更多...
Js — 定时器

Js — 定时器

有两种&#xff1a;setInterval 和 setTimeout 间隔时间单位为毫秒 setInterval 每隔指定的毫秒数重复执行一个函数或代码 开启定时器&#xff1a;setInterval(函数&#xff0c;间隔时间) 作用&#xff1a;每隔一段时间调用这个函数 注意&#xff1a;它不是立即执行&#x…
阅读更多...
【大数据测试spark+kafka-详细教程（附带实例）】

【大数据测试spark+kafka-详细教程（附带实例）】

大数据测试&#xff1a;Spark Kafka 实时数据处理与窗口计算教程 1. 概述1.1 大数据技术概述1.2 Apache Kafka 与 Spark 的结合 2. 技术原理与流程2.1 Kafka 简介2.2 Spark Streaming 简介2.3 数据流动与处理流程 3. 环境配置3.1 安装依赖项 4. 实例&#xff1a;实时数据处理与…
阅读更多...
其他教程：如何设计一个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;跨平台使…
阅读更多...
CSRF详解

CSRF详解

CSRF&#xff0c;全称是Cross-Site Request Forgery&#xff0c;即跨站请求伪造&#xff0c;也被称为“one click attack”或者session riding&#xff0c;是一种网络攻击方式。它允许攻击者诱导用户在已登录的Web应用程序上执行非预期的操作。 工作原理CSRF攻击通常涉及三个主…
阅读更多...
JSON格式

JSON格式

JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人和机器阅读和解析。它基于JavaScript的对象表示法&#xff0c;但被广泛用于多种编程语言。 JSON中的数据类型 字符串&#xff08;String&#xff09;&#xff1a;用双引…
阅读更多...
【开发】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;注意使用前需要…
阅读更多...
算法求解-最大和子序列问题(C#)

算法求解-最大和子序列问题(C#)

1、算法目标&#xff1a; 题目描述 设数组a是有n个元素的整数数组&#xff0c;如何从中找出最大和子序列的和&#xff1f; 输入 第一行输入n 第二行输入n个数 输出 输出最大和子序列的和 样例输入 4 2 -1 3 -4 样例输出 4 2、算法实现&#xff1a; using System;class Progr…
阅读更多...
最新文章

Copyright @ 2022~2023