「硬核JS」图解Promise迷惑行为｜运行机制补充
写在前面
Promise用起来很简单，JavaScript运行机制也不难，但是运行机制和 Promise 挂钩之后，往往就能把人迷的晕头转向，如果你也是如此，那此文或许能帮你解惑。
前些天有几个小伙伴看了我很早之前写的 「硬核JS」一次搞懂JS运行机制then 等等）还是不太懂。其实那篇文章的核心本来就只是运行机制的概念，而对于 Promise 迷惑行为拿捏不准的小伙伴是因为对 Promise 的整体实现机制不太了解导致的。
假如你不知道自己对这块是否了解，可以直接跳到最后几个小标题，看一看这些题型自己能否正确解答即可。
此文应读者要求，算是对 Promise+运行机制的一个梳理与补充，重要的是实战方面，列了几种常见的 Promise 相关求输出顺序的题型，几乎涵盖所有 Promise 难搞题型了，总之，目的只有一个：彻底搞明白 Promise+运行机制的各种迷惑行为。
JS运行机制简述
在开始之前，还是有必要简单介绍下 JS 的运行机制。
JavaScript 中有同步/异步任务的概念，同步任务在主线程上执行，会形成一个 执行栈，主线程之外，事件触发线程管理着一个 任务队列，只要异步任务有了运行结果，就在 任务队列 之中放一个事件回调。一旦 执行栈 中的所有同步任务执行完毕，就会读取 任务队列，将可运行的异步任务（任务队列中的事件回调，只要任务队列中有事件回调，就说明可以执行）添加到执行栈中，开始执行。
同步/异步任务是广义上的，同时，JavaScript 中还有宏任务（macrotask）和微任务（microtask）这种更加细致的概念，我们可以将每次执行栈执行的代码当做是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）， 每一个宏任务会从头到尾执行完毕，不会执行其他。而在异步任务中，有些特殊的任务我们称之为微任务，它在当前宏任务执行后立即执行。
比较常见的微任务有这些：
process.nextTick-Node
Promise.then
catch
finally
Object.observe
MutationObserver
queueMicrotask
...
简单来说，一段完整的 JS 代码，浏览器会将整体的 script（作为第一个宏任务）开始执行，所有代码分为同步任务、异步任务两部分：
同步任务直接进入主线程执行栈依次执行，异步任务会再分为普通异步任务（也是宏任务），和特殊异步任务（即微任务）；
普通的异步任务等有了运行结果其回调就会进入事件触发线程管理的
任务队列（可理解为宏任务队列）；特殊的异步任务也就是微任务的回调会立即进入一个微任务队列；
当主线程内的任务执行完毕，即主线程为空时，会检查微任务队列，如果有任务，就全部执行，如果没有就执行下一个宏任务（事件触发线程管理的
任务队列中）；
上述过程会不断重复，这就是Event Loop，事件循环。
浏览器中加上渲染的话就是先执行一个宏任务，再执行当前所有的微任务，接着开始执行渲染，然后再执行下一个宏任务，如此循环。
❝
简单回顾，详细请看
「硬核JS」图解Promise迷惑行为｜运行机制补充相关推荐
- 「硬核讲解」通达信跨周期引用均线指标公式
内容提要:本文主要介绍了编写通达信跨周期引用均线指标公式需要用到的方法,以及在固定位置写文字.数字需要使用的函数,并进行综合运用编写指标公式. 这几天有人问能否实现主图标记不同周期均线价格并按大小实时 ...
- 「 硬核教学」 ❤️ C语言编写扫雷游戏外挂❤️「 完整源码」
目录 第一步:使用CE找出棋盘的基址 第二步:使用CE/OD查看该地址的数据 第三步:对比棋盘分析数据的含义 第四步:验证猜想 第五步:编写功能 有没有羡慕学霸们在机房里 潇洒如意地玩着扫雷无限通关, ...
- sensei鼠标测试软件,「硬核测试：游戏鼠标精准度」赛睿SENSEI 310
原标题:「硬核测试:游戏鼠标精准度」赛睿SENSEI 310 作为赛睿最热销游戏鼠标之一,310有SENSEI(对称)和RIVAL(右手)两个版本,均采用今天要测的TrueMove3引擎,是基于PMW ...
- 滚轮每次滚动距离是一致的吗_「超硬核科普」鼠标的发展历史，中国人发明的鼠标滚轮...
鼠标,作为现代计算机必不可少的硬件之一 一直都在伴随着我们的成长 你可能,每天都会不停的在人家身上,摸来摸去的 并且,不停的感受着人家给你带来的舒适的手感 今天就由我来带领大家回顾一下这半个多世纪间, ...
- html5频谱制作教程,「硬核教程向」手把手教你制作带有频谱的Steam艺术展柜
针对萌新写的,基本上按着步骤来,你也能做个炫酷的艺术展柜. 具体效果: 请输入图片描述 如有不懂之处,在下方留言或者私信我即可. 操作软件:PS,AE 1.准备工作,你需要在PS中抠好你想要做展柜的图 ...
- 「硬核」labelme 图片中显示标签
这是一篇小众的博客,大部分小伙伴可能使用不到,但是对需要的小伙伴绝对是一剂良药!希望对有需要的小伙伴有用! labelme 虽然主要用于数据的标注,但是标注完的数据集在检查的时候,检查标注框对应的标签 ...
- 保姆级硬核教程：图解Transformer
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 一.前言 本文是图解 AI 算法系列教程的第二篇,今天的主角是 T ...
- 「镁客早报」国内航空公司暂停运行波音737MAX客机；英伟达将以70多亿美元收购以色列芯片制造商Mellanox...
阿里巴巴投资申通46.6亿元:长征火箭完成第300次发射!托举中星6C卫星从西昌发射. 1.阿里巴巴投资申通46.6亿元 今日消息,申通快递发布公告宣布,阿里巴巴将投资46.6亿元,入股申通快递控股股 ...
- 「镁客早报」国内航空公司暂停运行波音737MAX客机；英伟达将以70多亿美元收购以色列芯片制造商Mellanox... 1
阿里巴巴投资申通46.6亿元:长征火箭完成第300次发射!托举中星6C卫星从西昌发射. 1.阿里巴巴投资申通46.6亿元 今日消息,申通快递发布公告宣布,阿里巴巴将投资46.6亿元,入股申通快递控股股 ...
最新文章
- Ubuntu读取/root/.profile时发现错误:mesg:ttyname fa
- 关于Unity3D中鼠标移动指定物体的解决方案
- 行业短信 运营思路_飞信、易信之后 三大运营商要借5G再战微信
- python读取字典元素笔记_python学习笔记：字典的使用示例详解
- git 拉代码_一篇文章理清Git
- .NET学习笔记：文件和注册表操作
- 1.4万+阅读量，这篇JAMA论文，详细阐述临床试验统计方法，非常值得借鉴！
- 请检查captcha表格_【分享】工程资料这样写，再也不用担心检查组来检查资料了...
- 几种常见的基于Lucene的开源搜索解决方案对比
- java并发编程（12）-- 线程池 实际⽣产使⽤哪⼀个线程池 怎么设置
- 【BZOJ3294】放棋子（动态规划，容斥，组合数学）
- 区分音视频文件的容器格式和编码格式
- 2012安装oracle11g教程,Windows Server 2012 安装oracle11g(图文教程)
- axure android 原型设计工具,知乎和Quora高分APP原型设计工具推荐
- winrar分卷压缩_无广告的WinRAR解压软件
- 阿里云服务器如何隐藏真实ip
- 无人驾驶之KITTI数据集介绍与应用（一）——数据组织方式介绍
- 笔记本电脑启动无法打开计算机,笔记本电脑开机没反应（详细教程教您怎么解决）...
- 基于XAMPP的Testlink安装和配置
- 关于Ai打开图片，颜色变色问题
热门文章