宏任务队列和微任务队列

news/2024/11/28 17:38:20/
setTimeout(function() {console.log(1);
}, 0);new Promise(function (resolve, reject) {resolve(2);
}).then(console.log);console.log(3);
// 3
// 2
// 1

关于微任务(Promise中的then回调)为什么早于宏任务(setTimeout)的执行时间可能需要更详细的解释

JavaScript中的事件循环分为两个主要部分:宏任务队列和微任务队列

宏任务包括像setTimeout这样的异步任务,而微任务包括Promise的then回调、async/await等。事件循环的执行顺序如下:

  1. 执行当前宏任务(同步代码)
  2. 执行所有微任务队列中的任务
  3. 从宏任务队列中取出下一个任务,执行它
  4. 重复步骤2和步骤3,直到宏任务队列和微任务队列都为空

根据这个执行顺序,让我们分析一下上面的代码:

  1. 首先,执行同步代码 console.log(3);,输出 3。

  2. 接下来,创建了一个Promise,并且立即调用了then方法。这个then回调被添加到微任务队列中,但并没有立即执行。

  3. 接着,执行 setTimeout(function() { console.log(1); }, 0);,它被添加到宏任务队列中,但由于传入的时间是0,它并不会立即执行。它将在下一轮事件循环的宏任务队列中执行。

  4. 当前宏任务(同步代码)执行完毕,进入微任务队列阶段。此时,执行 Promise 的 then 回调,输出 2。这是因为微任务队列中的任务会在当前宏任务执行完毕后立即执行。

  5. 现在,事件循环开始执行宏任务队列中的任务,取出 setTimeout 中的回调函数,输出 1。

所以,输出结果是 3、2、1,这就解释了为什么then回调早于setTimeout执行。微任务总是在当前宏任务执行完毕后立即执行,而宏任务(setTimeout)则需要等待下一轮事件循环开始时执行。这就是为什么 then 回调早于 setTimeout。


http://www.ppmy.cn/news/1141119.html

相关文章

【SpringBoot】| Thymeleaf 模板引擎

目录 Thymeleaf 模板引擎 1. 第一个例子 2. 表达式 ①标准变量表达式 ②选择变量表达式(星号变量表达式) ③链接表达式(URL表达式) 3. Thymeleaf的属性 ①th:action ②th:method ③th:href ④th:src ⑤th:text ⑥th:…

【RHAL】板子烧widevine key

前言:国庆回来工作后很懵逼…又遇见了新问题,因为旧板子烧坏了,新板子系统没带widevine key,我用旧板子命令烧pass,新板子apk烧就fail。 又接触到了新的领域,新名词。不错的,甲方乙方一起带我学…

解决loadDep:omelette: sill install loadAllDepsIntoIdealTree

报错信息如下: 解决方案: 1、设置为淘宝的镜像源 npm config set registry https://registry.npm.taobao.org 2、 命令检验是否成功 npm config get registry 3、继续运行npm install即可 npm install 运行效果:

【React】深入理解React组件状态State

目录 一、何为State二、如何定义State三、如何判断是否为State四、如何正确使用State1、用setState修改State2、State的更新是异步的①、代码示例 3、State更新会被合并①、组件状态例子②、当只需要修改状态title时,只需要将修改后的title传给setState③、React会合…

Java中的transient关键字是什么意思?

Java中的transient关键字是什么意思? 在Java中,transient 是一个关键字,用于修饰实例变量(成员变量)。当一个实例变量被声明为transient 时,它的值不会被持久化(即不会被序列化)。 …

民族民俗景区3d智慧旅游系统提升游客旅游体验和质量

随着科技的不断发展,传统的旅游方式正在逐渐被新的技术和系统所取代。网上3D沉浸式旅游体验凭借其身临其境的沉浸式体验优势,正成为旅游业的新宠。 网上3D沉浸式旅游体验是将旅游景区、度假区、休闲街区、科博馆等场所空间,利用VR全景制作、w…

Acwing.143 最大异或对(trie树)

题目 在给定的N个整数A1&#xff0c;A2 . …Ax中选出两个进行xor(异或)运算&#xff0c;得到的结果最大是多少? 输入格式 第一行输入一个整数N。 第二行输入N个整数A1~AN。 输出格式 输出一个整数表示答案。 数据范围 1 ≤N ≤105,0≤A<231 输入样例: 3 1 2 3输出样…

短视频矩阵系统源码--源头技术独立自研框架开发

目录 一、批量剪辑&#xff08;采用php语言&#xff0c;数学建模&#xff09; 短视频合成批量剪辑的算法主要有以下几种&#xff1a; 1. 帧间插值算法&#xff1a;通过对多个视频的帧进行插帧处理&#xff0c;从而合成一段平滑的短视频。 2. 特征提取算法&#xff1a;提取多…