js宏任务微任务输出解析

第一种情况

      setTimeout(function () {console.log('setTimeout 1') //11 宏任务new Promise(function (resolve) {console.log('promise 1') //12 同步函数resolve()}).then(function () {console.log('promise then') //13 微任务})})async function async1() {console.log('async1 start') //2 函数调用await async2()console.log('async1 end') //7 等待async2执行完成、宏任务里的所有同步函数完成和正常输出完成后,再次获得执行机会await async3()}async function async2() {console.log('async2') //3 函数调用}async function async3() {console.log('async3') //8 函数调用}console.log('eventLoop')  //1  宏任务async1()new Promise(function (resolve) {console.log('promise 2') //4 遇到async2异步函数,处于等待状态,执行promise里的同步函数resolve()}).then(function () {console.log('promise2 then') //9 执行这个微任务})new Promise(function (resolve) {console.log('promise 4') //5 执行promise里的同步函数resolve()}).then(function () {console.log('promise4 then') //10 按照顺序,执行这个微任务})console.log('eventLoop end') //6 宏任务里的正常输出

第二种情况

      const init = async () => {setTimeout(function () {console.log('setTimeout 1') //11 宏任务new Promise(function (resolve) {console.log('promise 1') //12 同步函数resolve()}).then(function () {console.log('promise then') //13 微任务})})async function async1() {console.log('async1 start') //2 函数调用await async2()console.log('async1 end') //4 等待async2执行完成await async3()}async function async2() {console.log('async2') //3 函数调用}async function async3() {console.log('async3') //5 函数调用}console.log('eventLoop') //1  宏任务await async1() // 异步函数async1全部执行完成后才会继续往下走new Promise(function (resolve) {console.log('promise 2') //6 执行promise里的同步函数resolve()}).then(function () {console.log('promise2 then') //9 执行这个微任务})new Promise(function (resolve) {console.log('promise 4') //7 执行promise里的同步函数resolve()}).then(function () {console.log('promise4 then') //10 按照顺序,执行这个微任务})console.log('eventLoop end') //8 宏任务里的正常输出}init()

人工智能学习网站

https://chat.xutongbao.top

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

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

相关文章

【Pytorch】5.DataLoder的使用

什么是DataLoader 个人理解是,如果Dataset的所有数据相当于一副扑克牌,DataLoader就相当于从扑克牌中抽取几张,我们可以规定一次抽取的张数,或者以什么规则进行抽取 DataLoader的使用 查阅官网的文档,主要有这几个参数…

c#教程——索引器

前言: 索引器(Indexer)可以像操作数组一样来访问对象的元素。它允许你使用索引来访问对象中的元素,就像使用数组索引一样。在C#中,索引器的定义方式类似于属性,但具有类似数组的访问方式。 索引器&#x…

[Kubernetes] Rancher 2.7.5 部署 k8s

server: 192.168.66.100 master: 192.168.66.101 node1: 192.168.66.102 文章目录 1.rancher server 安装docker2.部署k8s3.kubeconfig 1.rancher server 安装docker 所有主机开通ipv4 vi /etc/sysctl.conf#加入 net.ipv4.ip_forward 1#配置生效 sysctl -prancher-server开通…

探秘WebSQL:轻松构建前端数据库

欢迎来到我的博客,代码的世界里,每一行都是一个故事 探秘WebSQL:轻松构建前端数据库 前言WebSQL简介WebSQL的基本操作WebSQL的实际应用WebSQL的局限性和替代方案 前言 在Web的世界里,我们总是追求更好的用户体验和更快的响应速度…

k8s 资源文件参数介绍

Kubernetes资源文件yaml参数介绍 yaml 介绍 yaml 是一个类似 XML、JSON 的标记性语言。它强调以数据为中心,并不是以标识语言为重点例如 SpringBoot 的配置文件 application.yml 也是一个 yaml 格式的文件 语法格式 通过缩进表示层级关系不能使用tab进行缩进&am…

02-Fortran基础--Fortran操作符与控制结构

02-Fortran基础--Fortran操作符与控制结构 0 引言1 操作符1.1 数学运算符1.2 逻辑运算符1.3 关系运算符 2 控制流程2.1 条件结构2.2 循环结构2.3 分支结构 0 引言 运算符和控制流程对编程语言是必须的,Fortran的操作符和控制流程涉及到各种数学运算符、逻辑运算符以及控制结构。…

Python高级编程-DJango2

Python高级编程-DJango2 没有清醒的头脑,再快的脚步也会走歪;没有谨慎的步伐,再平的道路也会跌倒。 目录 Python高级编程-DJango2 1.显示基本网页 2.输入框的形式: 1)文本输入框 2)单选框 3&#xff…

elementui+vue通过下拉框多选字段进行搜索模糊匹配

从字典中选择的值为["01","03"],在最开始的时候进行的处理是类似于表单提交的时候将json对象转换成了String类型 nature:["01","03"] this.queryParams.nature JSON.stringify(this.queryParams.nature); mapper层 <if test&quo…

截图工具Snipaste:不仅仅是截图,更是效率的提升

在数字时代&#xff0c;截图工具已成为我们日常工作和生活中不可或缺的一部分。无论是用于工作汇报、学习笔记&#xff0c;还是日常沟通&#xff0c;一款好用的截图工具都能大大提升我们的效率。今天&#xff0c;我要向大家推荐一款功能强大且易于使用的截图软件——Snipaste。…

Pycharm无法链接服务器环境(host is unresponsived)

困扰了很久的一个问题&#xff0c;一开始是在服务器ubuntu20.04上安装pycharm community&#xff0c;直接运行服务器上的pycharm community就识别不了anaconda中的环境 后来改用pycharm professional也无法远程连接上服务器的环境&#xff0c;识别不了服务器上的环境&#xff…

关系型数据库MySQL开发要点之多表设计案例详解代码实现

什么是多表设计 项目开发中 在进行数据库表结构设计时 根据数据模型和业务关系 会根据业务需求和业务模块之间的关系分析设计表结构 由于业务之间互相关联 所以表结构之间也存在着各种联系 主要分为以下三种 一对多 每个部门下是有多个员工的 但是一个员工只能归属一个部…

【C/C++】设计模式——单例模式

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; &#x1f525;c系列专栏&#xff1a;C/C零基础到精通 &#x1f525; 给大…

类加载器aa

一&#xff0c;关系图及各自管辖范围 &#xff08;不赘述&#xff09; 二&#xff0c;查看关系 package com.jiazai;public class Main {public static void main(String[] args) {ClassLoader appClassLoader ClassLoader.getSystemClassLoader();//默认System.out.println…

【数据结构】C/C++ 带头双向循环链表保姆级教程(图例详解!!)

目录 一、前言 二、链表的分类 &#x1f95d;单链表 &#x1f95d;双链表 &#x1f95d;循环链表 &#x1f95d;带头双向循环链表 &#x1f34d;头节点&#xff08;哨兵位&#xff09;的作用 ✨定义&#xff1a; ✨作用&#xff1a; &#x1f347;总结 三、带头双向循环链表 …

RS®ZNLE 矢量网络分析仪

R&SZNLE 矢量网络分析仪 宽频率范围&#xff1a;100 kHz 至 20 GHz 基础测量任务 价值高 独立操作 基础网络分析应用的理想之选 R&SZNLE 矢量网络分析仪易于用户使用&#xff0c;适用于基础测量任务 闻名遐迩的优质设计、创新的用户界面以及紧凑尺寸使 R&…

偏微分方程算法之椭圆型方程差分格式编程示例

目录 一、示例1-五点菱形格式 1.1 C代码 1.2 计算结果 二、示例2-九点紧差分格式 2.1 C代码 2.2 计算结果 三、示例3-二阶混合边值 3.1 C代码 3.2 计算结果 本专栏对椭圆型偏微分方程的三种主要差分方法进行了介绍&#xff0c;并给出相应格式的理论推导过程。为加深对…

力扣刷题--数组--第二天

今天仍然做二分查找相关的题目。先来回顾一下二分查找的方法和使用的条件。二分查找是在数组中查找目标值的一种方法&#xff0c;通过边界索引确定中间索引&#xff0c;判断中间索引处的元素值和目标值的大小&#xff0c;来不断缩小查找区间。使用二分查找有如下一些限制&#…

C语言实战项目--贪吃蛇

贪吃蛇是久负盛名的游戏之一&#xff0c;它也和俄罗斯⽅块&#xff0c;扫雷等游戏位列经典游戏的行列。在编程语言的教学中&#xff0c;我们以贪吃蛇为例&#xff0c;从设计到代码实现来提升大家的编程能⼒和逻辑能⼒。 在本篇讲解中&#xff0c;我们会看到很多陌生的知识&…

yum仓库

yum简介 1.基于RPM包构建的软件更新机制 2.可以自动解决依赖关系 3.所有软件包由yum软件仓库提供 yum工作原理 yum主配置文件 [rootlocalhost ~]# cat /etc/yum.conf [main] cachedir/var/cache/yum/$basearch/$releasever #yum下载的RPM包的缓存目录 $basearch代表硬件架…

CANdela/Diva系列1--CANdela Studio的基本介绍

大家好&#xff0c;这个系列主要给大家介绍跟诊断相关的Vector 工具CANdela和Diva&#xff0c;首先介绍CANdela。 目录 1.CANdela的简介&#xff1a; 2.如何打开CANdela 工程&#xff1a; 3.CANdela工程的详细介绍&#xff1a; 3.1 工具栏的介绍&#xff1a; 3.2 工作树的…