【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.rhkb.cn/news/468437.html

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

相关文章

【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销

【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销

一、Linux 概述 1. 应用领域 服务器领域 linux在服务器领域是最强的&#xff0c;因为它免费、开源、稳定。 嵌入式领域 它的内核最小可以达到几百KB, 可根据需求对软件剪裁&#xff0c;近些年在嵌入式领域得到了很大的应用。 主要应用&#xff1a;机顶盒、数字电视、网络…
阅读更多...
ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver（二）

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver（二）

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver&#xff08;二&#xff09; 本教程作为gdb/gdbserver编译安装教程的一个补充&#xff0c;教会大家如何使用gdb/gdbserver进行远程调试。 如上图所示&#xff0c;我们需要将编译后的gdbserver上传至目标设备&#xff0c;其上…
阅读更多...
Flutter错误： uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared

Flutter错误： uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared

前言 今天要做蓝牙通信的功能&#xff0c;我使用了flutter_reactive_ble这个库&#xff0c;但是在运行的时候发现一下错误 Launching lib/main.dart on AQM AL10 in debug mode... /Users/macbook/Desktop/test/flutter/my_app/android/app/src/debug/AndroidManifest.xml Err…
阅读更多...
c中柔性数组

c中柔性数组

c99中&#xff0c;结构中最后一个元素允许是未知大小的数组&#xff0c;这就叫柔性数组成员。 柔性数组的特点 1.结构中柔性数组前必须至少有一个其他成员 2.sizeof返回的这种结构大小不包括柔性数组的内存 3.包含柔性数组成员的结构用malloc函数进行动态分配&#xff0c;并…
阅读更多...
WPS 默认模板修改

WPS 默认模板修改

重装系统把word自定义样式搞没了&#xff0c;安装office时间太长&#xff0c;转战wps 解决方案 打开wps 点击【新建】word空白文档 设置修改你自己的样式 点击文件–另存为–Microsoft Word 带宏的模板文件&#xff08;*.dotm&#xff09; 另存路径为如下&#xff1a; 查…
阅读更多...
Ubuntu24.04网络异常与应对方案记录

Ubuntu24.04网络异常与应对方案记录

PS: 参加过408改卷的ZJU ghsongzju.edu.cn 开启嘲讽: 你们知道408有多简单吗&#xff0c;操作系统真实水平自己知道就行&#xff5e;&#xff5e; Requested credits of master in UWSC30&#xff0c;in ZJU24&#xff0c;domestic master is too simple ubuntu安全软件 在 U…
阅读更多...
[C++11] Lambda 表达式

[C++11] Lambda 表达式

lambda 表达式&#xff08;Lambda Expressions&#xff09;作为一种匿名函数&#xff0c;为开发者提供了简洁、灵活的函数定义方式。相比传统的函数指针和仿函数&#xff0c;lambda 表达式在简化代码结构、提升代码可读性和编程效率方面表现出色。 Lambda 表达式的基本语法 在…
阅读更多...
Docker平台搭建方法

Docker平台搭建方法

Docker平台搭建方法 1.1在VMware中创建两个虚拟机&#xff0c;只需要1个网卡&#xff0c;连接192.168.200.0网络。 虚拟机分配2个CPU,2G内存&#xff0c;60G硬盘&#xff0c;主机名分别为server和client,IP地址分别为192.168.200.137和192.168.200.138。server节点还兼做regis…
阅读更多...
【学习笔记】Kylin-Desktop-V10-SP1 麒麟系统知识4——设备设置

【学习笔记】Kylin-Desktop-V10-SP1 麒麟系统知识4——设备设置

提示&#xff1a;学习麒麟Kylin-Desktop-V10-SP1系统设备设置相关知识&#xff0c;包含设备设置进入方法、配置打印机、设置鼠标、键盘相关参数&#xff08;包含输入法的配置&#xff09;、以及管理快捷键组合、和多屏协同相关配置 一、前期准备 成功安装麒麟系统&#xff08…
阅读更多...
Linux应用项目之量产工具（一）——显示系统

Linux应用项目之量产工具（一）——显示系统

目录 前言 项目特点及介绍 ① 简单易用 ② 软件可配置、易扩展 ③ 纯 C 语言编程 软件总框架 显示系统 1.数据结构抽象 disp_manager.h 2.Framebuffer编程 framebuffer.c 3.显示管理 disp_manager.c 4.单元测试 disp_test.c 顶层目录Makefile 顶层目录Makefil…
阅读更多...
企微SCRM价格解析及其性价比分析

企微SCRM价格解析及其性价比分析

内容概要 在如今的数字化时代&#xff0c;企业对于客户关系管理的需求日益增长&#xff0c;而企微SCRM&#xff08;Social Customer Relationship Management&#xff09;作为一款新兴的客户管理工具&#xff0c;正好满足了这一需求。本文旨在为大家深入解析企微SCRM的价格体系…
阅读更多...
leetcode92:反转链表||

leetcode92:反转链表||

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a;[1,4,3,2…
阅读更多...
Python——数列1/2，2/3，3/4，···，n/(n+1)···的一般项为Xn=n/(n+1)，当n—＞∞时，判断数列{Xn}是否收敛

Python——数列1/2，2/3，3/4，···，n/(n+1)···的一般项为Xn=n/(n+1)，当n—＞∞时，判断数列{Xn}是否收敛

没注释的源代码 from sympy import * n symbols(n) s n/(n1) print(数列的极限为&#xff1a;,limit(s,n,oo))
阅读更多...
多线程的创建方式以及及Thread类详解

多线程的创建方式以及及Thread类详解

目录 一.线程的创建方法&#xff1a;&#xff08;重点&#xff09; 一&#xff1a;继承Thread类 写法一&#xff1a;正常写法 写法二&#xff1a;匿名内部类 二.实现Runnable接口 写法一&#xff1a;正常写法 写法二&#xff1a;匿名内部类 三. 实现 Callable 接口 ​…
阅读更多...
成功解决WSL2上的Ubuntu22.04执行sudo apt-get update指令报错问题

成功解决WSL2上的Ubuntu22.04执行sudo apt-get update指令报错问题

问题&#xff1a;输入sudo apt-get update指令会显示如下报错 问题所在&#xff1a;Temporary failure in name resolution 显然是系统无法解析域名。这可能是 DNS 配置问题。 解决方案&#xff1a; 临时修改 DNS 配置 尝试手动修改 /etc/resolv.conf 文件来使用公共 DNS 服务…
阅读更多...
【英特尔IA-32架构软件开发者开发手册第3卷：系统编程指南】2001年版翻译，2-19

【英特尔IA-32架构软件开发者开发手册第3卷：系统编程指南】2001年版翻译，2-19

文件下载与邀请翻译者 学习英特尔开发手册&#xff0c;最好手里这个手册文件。原版是PDF文件。点击下方链接了解下载方法。 讲解下载英特尔开发手册的文章 翻译英特尔开发手册&#xff0c;会是一件耗时费力的工作。如果有愿意和我一起来做这件事的&#xff0c;那么&#xff…
阅读更多...
ffmpeg 视频滤镜：屏蔽边框杂色- fillborders

ffmpeg 视频滤镜：屏蔽边框杂色- fillborders

滤镜描述 fillborders 官网链接 > FFmpeg Filters Documentation fillborders滤镜有几种方式帮你屏蔽边框的杂色、不好的图案。 滤镜使用 参数 left <int> ..FV.....T. set the left fill border (from 0 to INT_MAX) (default 0)right …
阅读更多...
Unity性能优化 -- 性能分析工具

Unity性能优化 -- 性能分析工具

Stats窗口Profiler窗口Memory Profiler其他性能分析工具&#xff08;Physica Debugger 窗口&#xff0c;Import Activity 窗口&#xff0c;Code Coverage 窗口&#xff0c;Profile Analyzer 窗口&#xff0c;IMGUI Debugger 窗口&#xff09; Stats 统级数据窗口 game窗口 可…
阅读更多...
【Ant.designpro】上传图片

【Ant.designpro】上传图片

文章目录 一、前端二、后端 一、前端 fieldProps:可以监听并且获取到组件输入的内容 action{“/api/upload_image”} 直接调用后端接口 <ProFormUploadButtonlabel{"上传手续图片"}name{"imgs"}action{"/api/upload_image"}max{5} fieldPro…
阅读更多...
王珊数据库系统概论第六版PDF+第五版课后答案+课件

王珊数据库系统概论第六版PDF+第五版课后答案+课件

为了保持科学性、先进性和实用性&#xff0c; 编者在第5版教材基础上对全书内容进行了修改、更新和充实。在科学性方面&#xff0c; 编者在系统篇中增加了第9章关系数据库存储管理&#xff0c; 讲解数据库的逻辑与物理组织方式及索引结构。增加这部分内容有助于学生更好地理解关…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023