【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.xdnf.cn/news/9863.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

基础概念理解

基础概念理解

一&#xff0c;数据结构分类 连续结构&#xff0c;跳转结构。 二&#xff0c;对变量的理解 在 C 语言中&#xff0c;变量是用于存储数据的抽象符号。变量本质上是一块内存区域的标识符&#xff08;即它代表内存中的某一块区域&#xff09;&#xff0c;用来存储数据&#xff…
阅读更多...
C 学习（4）

C 学习（4）

return 0; 前提&#xff1a;C 语言规定&#xff0c;main()是程序的入口函数&#xff0c;即所有的程序一定要包含一个main()函数。程序总是从这个函数开始执行&#xff0c;如果没有该函数&#xff0c;程序就无法启动。其他函数都是通过它引入程序的。 main()的写法&#xff0c…
阅读更多...
欺诈文本分类检测（十八）：基于llama.cpp+CPU推理

欺诈文本分类检测（十八）：基于llama.cpp+CPU推理

1. 前言 前文我们用Lora训练出自己的个性化模型后&#xff0c;首先面临的问题是&#xff1a;如何让模型在普通机器上跑起来&#xff1f;毕竟模型微调时都是在几十G的专用GPU上训练的&#xff0c;如果换到只有CPU的普通电脑上&#xff0c;可能会面临几秒蹦一个词的尴尬问题。 …
阅读更多...
工程数学线性代数（同济第七版）附册课后习题答案PDF

工程数学线性代数（同济第七版）附册课后习题答案PDF

《线性代数附册 学习辅导与习题全解》是与同济大学数学科学学院编《工程数学 线性代数》第七版教材配套的教学辅导书&#xff0c;由同济大学作者团队根据教材内容和要求编写而成。本书在《工程数学 线性代数》第六版附册&#xff08;即辅导书&#xff09;的基础上修改而成。全书…
阅读更多...
传输层协议、ACL

传输层协议、ACL

第六章 传输层协议、ACL 文章目录 第六章 传输层协议、ACL1.TCP和UDP协议1.1 TCP协议1.2 TCP报文段1.3 TCP连接 2.UDP协议3.ACL概述ACL原理及种类ACL组成规则编号通配符&#xff08;反掩码&#xff09; 4.ACL应用ACL匹配规则ACL匹配规则 1.TCP和UDP协议 TCP/IP协议族的传输层协…
阅读更多...
(蓝桥杯C/C++)——搜索

(蓝桥杯C/C++)——搜索

一、回溯法 1.回溯法简介 回溯法一般使用 ** DFS(深度优先搜索) ** 实现&#xff0c;DFS是一种遍历或搜索图、树或图像等数据结构的算法&#xff0c;当然这个图、树未必要存储下来(隐式处理就是回溯法)&#xff0c;常见的是通过某种关系构造出的搜索树&#xff0c;搜索树一般…
阅读更多...
Turtlebot3 buger 硬件与操作平台详细介绍

Turtlebot3 buger 硬件与操作平台详细介绍

引言 TurtleBot3 有三个版本&#xff0c;分别是紧凑型的 Burger、功能更强的 Waffle和性能提升的 Waffle Pi&#xff0c;分别适用于不同的应用需求。使用 Raspberry Pi 作为主控单板计算机&#xff08;SBC&#xff09;&#xff0c;而 Waffle Pi 可以使用更强大的 NVIDIA Jetson…
阅读更多...
Ubuntu实现双击图标运行自己的应用软件

Ubuntu实现双击图标运行自己的应用软件

我们知道在Ubuntu上编写程序&#xff0c;最后编译得到的是一个可执行文件&#xff0c;大致如下 然后要运行的时候在终端里输入./hello即可 但是这样的话感觉很丑很不方便&#xff0c;下边描述一种可以类似Windows上那种双击运行的实现方式。 我们知道Ubuntu是有一些自带的程序…
阅读更多...
Chromium Mojo(IPC)进程通信演示 c++（4）

Chromium Mojo(IPC)进程通信演示 c++（4）

122版本自带的mojom通信例子仅供学习参考&#xff1a; codelabs\mojo_examples\01-multi-process 其余定义参考文章&#xff1a; Chromium Mojo(IPC)进程通信演示 c&#xff08;2&#xff09;-CSDN博客 01-mojo-browser.exe 与 01mojo-renderer.exe进程通信完整例子。 一、…
阅读更多...
基于Prometheus的client_golang库实现应用的自定义可观测监控

基于Prometheus的client_golang库实现应用的自定义可观测监控

文章目录 1. 安装client_golang库2. 编写可观测监控代码3. 运行效果4. jar、graalvm、golang编译运行版本对比 前文使用javagraalvm实现原生应用可观测监控&#xff1a; prometheus client_java实现进程的CPU、内存、IO、流量的可观测&#xff0c;但是部分java依赖包使用了复杂…
阅读更多...
【C++课程学习】：继承（上）（详细讲解）

【C++课程学习】：继承（上）（详细讲解）

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;C课程学习 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 目录 一.继承的概念和定义 &#x1f384;继承的概念&#xff1a; &#x1f384;继承的定义&#xff1a; …
阅读更多...
PVE纵览-备份与快照指南

PVE纵览-备份与快照指南

PVE纵览-备份与快照指南 文章目录 PVE纵览-备份与快照指南摘要1 备份与快照概述定义与区别备份与快照在PVE中的应用场景 2 PVE 备份功能详解备份类型与策略配置备份任务自动化备份管理 3 PVE 快照功能详解快照的工作原理快照的创建与恢复机制快照对系统性能的影响快照的使用场景…
阅读更多...
Android JNI 技术入门指南

Android JNI 技术入门指南

引言 在Android开发中&#xff0c;Java是一种主要的编程语言&#xff0c;然而&#xff0c;对于一些性能要求较高的场景&#xff08;如音视频处理、图像处理、计算密集型任务等&#xff09;&#xff0c;我们可能需要使用到C或C等语言来编写底层的高效代码。为了实现Java代码与C…
阅读更多...
供应商srm管理，招投标管理，电子采购管理，在线询价，在线报价，供应商准入审核（java代码）

供应商srm管理，招投标管理，电子采购管理，在线询价，在线报价，供应商准入审核（java代码）

前言&#xff1a; 随着互联网和数字技术的不断发展&#xff0c;企业采购管理逐渐走向数字化和智能化。数字化采购平台作为企业采购管理的新模式&#xff0c;能够提高采购效率、降低采购成本、优化供应商合作效率&#xff0c;已成为企业实现效益提升的关键手段。系统获取在文末…
阅读更多...
Java 函数接口Supplier【供给型接口】简介与示例

Java 函数接口Supplier【供给型接口】简介与示例

Java中四个重要的函数式接口&#xff1a;Function、Predicate、Consumer和Supplier。这些接口是函数式编程的基础&#xff0c;Function用于转换操作&#xff0c;Predicate用于进行条件判断&#xff0c;Consumer用于消费输入而不产生输出&#xff0c;而Supplier则用于提供值但不…
阅读更多...
线程与进程的区别（面试）

线程与进程的区别（面试）

一.进程 进程&#xff1a;一个程序启动起来&#xff0c;就会对应一个进程&#xff0c;进程就是系统分配资源的基本单位。 上面一部分进程是我们自己去执行应用的可执行文件, 而另一部分是操作系统自动启动的进程. 二.线程 线程&#xff1a;线程是进程中的一个执行单元&#xff…
阅读更多...
VMware调整窗口为可以缩小但不改变显示内容的大小

VMware调整窗口为可以缩小但不改变显示内容的大小

也就是缩小窗口不会影响内容的大小 这样设置就好
阅读更多...
OpenAI 发布了新的事实性基准——SimpleQA

OpenAI 发布了新的事实性基准——SimpleQA

SimpleQA 简介 名为 SimpleQA 的事实性基准&#xff0c;用于衡量语言模型回答简短的事实性问题的能力。 人工智能领域的一个悬而未决的问题是如何训练模型&#xff0c;使其产生符合事实的回答。 目前的语言模型有时会产生错误的输出或没有证据证明的答案&#xff0c;这个问题…
阅读更多...
酒店民宿小程序，探索行业数字化管理发展

酒店民宿小程序，探索行业数字化管理发展

在数字化发展时代&#xff0c;各行各业都开始向数字化转型发展&#xff0c;酒店民宿作为热门行业也逐渐趋向数字、智能化发展。 对于酒店民宿来说&#xff0c;如何将酒店特色服务优势等更加快速运营推广是重中之重。酒店民宿小程序作为一款集结预约、房源管理、客户订单管理等…
阅读更多...
[C++11] 可变参数模板

[C++11] 可变参数模板

文章目录 基本语法及原理可变参数模板的基本语法参数包的两种类型可变参数模板的定义 sizeof... 运算符可变参数模板的实例化原理可变参数模板的意义 包扩展包扩展的基本概念包扩展的实现原理编译器如何展开参数包包扩展的高级应用 emplace 系列接口emplace_back 和 emplace 的…
阅读更多...
最新文章

Copyright @ 2022~2023