js事件循环机制 宏任务微任务执行时机

事件循环的工作步骤
  1. 先执行同步代码,所有同步代码都在主线程上执行,形成一个执行栈(又称调用栈,先进后出)。
  2. 当遇到异步任务时,会将其挂起并添加到任务队列中(先进先出),宏任务放入宏任务队列,微任务放进微任务队列。
  3. 当执行栈为空时,事件循环先从微任务队列中按顺序取出任务,加入到执行栈中执行。如果微任务队列清空,就从宏任务队列中取出任务加入执行栈中执行。
  4. 重复上述步骤,直到任务队列为空。
执行时机

微任务早于宏任务,每次从宏任务队列读取任务时,微任务队列都是已执行完毕清空的。

微任务执行过程中生成新的异步任务,将其放在对应的队列中,如果有生成新的微任务,会依次将所有的微任务执行完成后再执行宏任务。
宏任务在执行过程生成新的微任务时,那么这些微任务会被添加到微任务队列中,等待当前这个宏任务执行完成后依次执行微任务队列。当所有微任务都执行完成后,才会从宏任务队列中取出下一个任务执行。

调用栈

调用栈(call stack)也叫执行栈,是 JavaScript 运行时用于存储函数调用的数据结构(栈先进后出),它记录了当前执行的上下文(context)和函数调用链。

function bar() {return 2;
}
function foo() {return bar();
}
function main() {console.log(foo());
}
main();

在执行 main() 函数时,它会调用 foo() 函数,将 foo() 函数的调用信息添加到调用栈中。在 foo() 函数中,又调用了 bar() 函数,将 bar() 函数的调用信息也添加到调用栈中。最后,在 bar() 函数中返回结果后,将 bar() 函数的调用信息从调用栈中弹出。接着执行 foo() 函数返回结果,再将 foo() 函数的调用信息从调用栈中弹出。最后,main() 函数也执行完毕,调用栈为空。在函数执行期间,调用栈会保持不断增长和收缩的状态。

任务队列

任务队列(task queue)通常分为两种类型:宏任务队列和微任务队列。只有异步代码才会进入任务队列,然后按照先进先出的顺序执行。

代码示例

async function async1() {console.log("start"); // 第1轮await async2(); // 第1轮await async3(); // 第2轮 因为上一行的await,这里属于微任务,放在微任务队列console.log('async111 end'); // 第3轮 第2轮执行的时候,因为上一行的await,这里属于微任务,放在微任务队列,等待第3轮执行。
}
async function async2() {console.log('async222 end'); // 第1轮
}
async function async3() {console.log('async333 end'); // 第2轮
}
async1(); // 第一轮
setTimeout(() => {console.log('setTimeout1'); // 第4轮 放在宏任务队列,等待微任务队列清空后,执行new Promise(resolve=>{console.log("setTimeout1->Promise") // 第4轮 同步代码resolve(true)}.then(()=>{console.log("setTimeout1->Promise->then") // 第5轮 微任务})
}, 0)
new Promise(resolve => {console.log('Promise'); // 第1轮,这里属于同步代码resolve()
}).then(() => {console.log('Promise111'); //第2轮,微任务setTimeout(() => console.log("setTimeout2"); // 第7轮,第2轮的时候,这个任务才被放在宏任务队列中,在setTimeout3之后执行。})
}).then(() => {console.log('Promise222'); // 第3轮 第2轮执行时,会将这里放在微任务队列中,等待第3轮执行
})
setTimeout(() => {console.log('setTimeout3'); // 第6轮 宏任务,本可以在第4轮宏任务一起执行,由于4生成了新的微任务,当4轮宏任务执行完毕后,要从微任务队列中执行微任务后(第5轮),再执行该宏任务
}, 0)
console.log('end'); // 第1轮
// start
// async222 end
// Promise
// end
// async333 end
// Promise111
// async111 end
// Promise222
// setTimeout1
// setTimeout1->Promise
// setTimeout1->Promise->then
// setTimeout3
// setTImeout2
// 第几轮的说法并不准确,仅作分析思路。

参考博客:
JavaScript——事件循环机制(Event Loop)浅析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/667825.shtml

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

相关文章

17、ELK

17、ELK helm 安装 elkfk&#xff08;kafka 集群外可访问&#xff09; ES/Kibana <— Logstash <— Kafka <— Filebeat 部署顺序&#xff1a; 1、elasticsearch 2、kibana 3、kafka 4、logstash 5、filebeat kubectl create ns elkhelm3部署elkfk 1、elast…

基础面试题篇2

前言 前两天又比较忙&#xff0c;放假前的赶工。今天已经到家啦&#xff0c;咱们继续分享一下常用的基础知识。 基础面试题篇2 BIO AIO NIO有何区别&#xff1f; BIO&#xff1a;同步阻塞式 IO&#xff0c;就是我们平常使用的传统 IO&#xff0c;它的特点是模式简单使用方便…

使用PySpark处理DataFrame以拆分数组列

问题&#xff1a;用pyspark 处理df1,df1 有三列&#xff0c;第一列是商品pid,第二列是商品name,第三列是候选标品cid_list(有多个cid),将df1中的cid_list拆开,转换成一个商品id和name对应一个cid&#xff0c;但是有多行 from pyspark.sql.functions import explode, col# 假设…

神经网络 | 基于 CNN 模型实现土壤湿度预测

Hi&#xff0c;大家好&#xff0c;我是半亩花海。在现代农业和环境监测中&#xff0c;了解土壤湿度的变化对于作物生长和水资源管理至关重要。通过深度学习技术&#xff0c;特别是卷积神经网络&#xff0c;我们可以利用过去的土壤湿度数据来预测未来的湿度趋势。本文将使用 Pad…

深入了解关联查询和子查询

推荐阅读 给软件行业带来了春天——揭秘Spring究竟是何方神圣&#xff08;一&#xff09; 给软件行业带来了春天——揭秘Spring究竟是何方神圣&#xff08;二&#xff09; 文章目录 推荐阅读关联查询子查询 关联查询 关联查询 从多张表中查询对应记录的信息&#xff0c;关联查…

字节、十六进制、二进制之间的关系

字节、十六进制和二进制是计算机领域中常用的术语&#xff0c;它们之间有着密切的关系。在这篇文章中&#xff0c;我们将探讨字节、十六进制和二进制之间的关系&#xff0c;并提供一些例子来说明它们的应用。 首先&#xff0c;让我们了解一下字节。字节是计算机存储和传输数据…

组合数学基础

隔板法 X 1 X 2 . . . X n m , X i > 0 X_1X_2...X_nm,\quad X_i>0 X1​X2​...Xn​m,Xi​>0 求方程解的个数 求方程解的个数 求方程解的个数 m 个球插入 n − 1 个板将 m 个球分成 n 份 m个球插入n-1个板将m个球分成n份 m个球插入n−1个板将m个球分成n份 方程…

Ubuntu下的磁盘管理,分区管理,挂载和卸载分区

探索Ubuntu下的磁盘管理 在Ubuntu操作系统中&#xff0c;磁盘管理是系统维护中至关重要的一部分。它涉及到分区、格式化、挂载、监视以及维护磁盘等操作。本文将带您深入了解Ubuntu下的磁盘管理&#xff0c;并介绍一些常用的工具和技术。 1. 磁盘基础知识 在开始磁盘管理之前…

Acwing---3302. 表达式求值

表达式求值 1.题目2.基本思想3.代码实现 1.题目 给定一个表达式&#xff0c;其中运算符仅包含 ,-,*,/&#xff08;加 减 乘 整除&#xff09;&#xff0c;可能包含括号&#xff0c;请你求出表达式的最终值。 注意&#xff1a; 数据保证给定的表达式合法。题目保证符号 - 只作…

服务器和云服务器哪个更安全?

随着云计算技术的不断发展&#xff0c;越来越多的企业开始选择使用云服务器来存储和处理数据。然而&#xff0c;对于一些企业来说&#xff0c;他们可能更倾向于使用传统的服务器。在这种情况下&#xff0c;安全性成为了一个重要的考虑因素。那么&#xff0c;服务器和云服务器哪…

mac下载工具:JDownloader 2 for Mac 中文版

JDownloader是一款开源的下载管理工具&#xff0c;主要使用Java编程语言开发&#xff0c;因此它能够在支持Java的操作系统上运行&#xff0c;包括Windows、Linux和Mac OS。这款软件专门为那些需要通过网盘下载文件的用户提供便利&#xff0c;它支持众多流行的网盘服务&#xff…

11、SystemInit函数解读

1、系统时钟初始化函数&#xff1a;SystemInit(); 使用库函数的时候&#xff0c;在系统启动之后会自动调用 2、首先如果使用外部时钟源HSE&#xff0c;要配置外部晶振频率&#xff1a;stm32f4xx.h 3、初始化之前首先通过宏定义定义下面变量来定义系统时钟频率&#xff1a; …

python将Excel文档转成.db数据库文件

python实现Excel转.db数据库 1.程序实现 程序实现以下功能&#xff1a; 1.读取一个Excel文件,文件名通过函数传参数传入 2.将文件读取的内容保存到一个数据库文件中 3.数据库的文件名以传入的Excel文件的文件名命名 4.将excel文件的工作簿的名字作为数据库的表单名 5.将Excel…

idea修改项目git地址

大家好&#xff0c;今天给大家分享的知识是如何在idea中修改项目的git地址。 一、修改地址 首先我们先找到菜单栏中Git选项&#xff0c;然后点击管理远程&#xff08;Manage Remote&#xff09; 之后双击origin之后就可以定义名称或者URL了。

电路设计(10)——超温报警电路的proteus仿真

1.题目背景 在现实生活中&#xff0c;常有一种工程技术&#xff0c;即带有自动温度补偿的设备&#xff0c;能在规定温度内正常工作。但是为了设备安全&#xff0c;需设定工作的上限温度&#xff0c;万一温控补偿失效&#xff0c;设备温度一旦超出上限温度时&#xff0c;便立即切…

前端excel带样式导出 exceljs 插件的使用

案例 <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1"><title>exceljs 使用</title></head><body><button …

ReactNative实现宽度变化实现的动画效果

效果如上图所示&#xff0c;通过修改设备宽度实现动画效果 import React, {useRef, useEffect, useState} from react; import {Animated, Text, View, Image} from react-native;const FadeInView props > {const fadeAnim useRef(new Animated.Value(0)).current;React…

PyTorch、NCNN、Numpy三者张量的shape

目录 一、PyTorch二、NCNN三、Numpy 一、PyTorch 在 PyTorch 中&#xff0c;张量&#xff08;Tensor&#xff09;的形状通常按照 (N, C, H, W) 的顺序排列&#xff0c;其中&#xff1a; N 是批量大小&#xff08;batch size&#xff09; C 是通道数&#xff08;channel number…

【Node系列】连接数据库

文章目录 一、连接MySql二、连接MongoDB三、相关链接 一、连接MySql 首先&#xff0c;您需要安装mysql模块。在命令行中&#xff0c;导航到您的项目目录并输入以下命令&#xff1a; npm install mysql然后&#xff0c;您可以在Node.js代码中使用mysql模块来连接MySQL数据库、…

在vs code的terminal,debug执行python main.py --train True

GPT4告诉我&#xff1a; 在VS Code中以debug状态执行带有参数&#xff08;如--train&#xff09;的main.py文件&#xff0c;你需要在launch.json配置文件中正确设置参数。以下是详细步骤&#xff1a; 打开你的main.py文件&#xff1a;确保你的main.py文件已经在VS Code中打开…