js的异步方法:promise与定时器相遇,碰到的火花

news2024/9/25 19:24:32

前言:
        我们在项目中长使用的异步方法 promise与定时器 在一起后,他们的顺序是什么样呢?这里来说一说。

案例1:

console.log('异步打印顺序:');

  console.log(1);
  setTimeout(()=>{
    console.log(2);
  },2000)
  setTimeout(()=>{
    console.log(3);
  },0)
  Promise.resolve().then(()=>{
    console.log(4); //微任务
  })
  Promise.resolve().then(()=>{
    console.log(5); //微任务
  },6000)
  console.log(6);

结果是:

1、先执行正常的js,比如1->6

2、再执行 promise的then,比如 4->5

3、最后再执行 定时器,根据秒数来控制 ,比如 3->2

案例2:

console.log('异步打印顺序:');

setTimeout(()=>console.log(1))
new Promise(resolve => {
  console.log(2);
  resolve()
}).then(()=>{
  console.log(3);
})
console.log(4);

结果是:

1、先执行 promise的 resolve

1、先执行正常的js

2、再执行 promise的then

3、最后再执行 定时器,

总结:执行顺序:

1、同步先执行

promise的 resolve也属于同步,跟在 promise外面效果是一致的

2、同步结束以后在执行异步里面的微任务

比如 promise的 then

3、最后是宏任务 定时器

为什么异步里面是先执行宏任务,但是实际打印的情况,却是先打印 微任务,在打印宏任务?

官方解释:

先执行同步代码,遇到异步宏任务则将异步宏任务放入宏任务队列中,遇到异步微任务则将异步微任务放入微任务队列中,

1、当所有同步代码执行完毕后,

2、再将异步微任务从队列中调入主线程执行,

3、微任务执行完毕后再将异步宏任务从队列中调入主线程执行,一直循环直至所有任务执行完毕。

简单来说:

因为宏任务试下一个时间循环开始的宏任务,而微任务是这次事件循环就执行的微任务,他们之间隔了一个dom渲染,所以造成了微任务比宏任务更快执行的错觉

宏任务和微任务

宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等等)。

微任务:当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(promise.then ,promise.catch 等等)。

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

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

相关文章

APP 兼容性测试是什么?10年阿里测试老鸟告诉你......

1、APP 兼容性测试认识 随着 APP 应用范围越来越广,用户群体越来越大,终端设备的型号也越来越多,移动终端碎片化加剧,使得 APP 兼容性测试成为测试质量保障必须要考虑的环节。 APP 兼容性测试通常会考虑:操作系统、厂…

firefly开发板RK3588非默认外设使能(串口uart、IIC、adc等)设备树修改详细步骤

sdk获取和内核编译,参考上一篇博文:rk3588内核裁剪 一、相关文件 文件1: rk3588_repo_sdk_v1.0.2a/kernel/arch/arm64/boot/dts/rockchip/rk3588-firefly-itx-3588j.dtsi此文件是针对firefly的板级设备树文件。 文件2: rk3588…

C#底层库--MySQL数据库脚本构建类(自动构建insert、update)

系列文章 C#底层库–记录日志帮助类 本文链接:https://blog.csdn.net/youcheng_ge/article/details/124187709 C#底层库–MySQL数据库脚本构建器(推荐阅读) 本文链接:https://blog.csdn.net/youcheng_ge/article/details/129179…

华为云计算之远程复制

实验环境说明身份管理IP业务IP主设备192.168.43.50H2:192.168.43.55从设备192.168.43.100P2:192.168.43.105存储的管理端口为8088登录到存储设备查看是否导入License访问https://192.168.43.50:8088,登录到主设备在设置中查看是否有添加远程设…

【AI绘图学习笔记】生成函数

生成模型学习笔记 (文章中大部分内容从网上学习笔记中摘录,推荐阅读原文,吴恩达深度学习课程笔记暂时停更一段时间,学习AI绘图原理是为了搞定毕业设计,等忙完再回头把基础补完,推荐读物《深度学习》花书&a…

我劝你千万不要去做CSGO游戏搬砖项目

尽管童话姐姐本人做CSGO游戏搬砖都快三年了,带的搬砖学员也好几百人了。但今天还是要跟未入行或者还在考虑是否入行的朋友们敲个警钟。 随着做这个的人越来越多,网上关于这个项目的文章,视频,硬广、软广也越来越多。就拿我朋友圈发…

高精度工业检测利器,维视智造BT-12C080双远心镜头

T-12C080 双远心镜头BT-12 系列标准 C 接口双远心镜头,与 1/2″(对角线 8mm)及以下成像靶面工业相机完美搭配,其结构稳定、外观轻巧,大景深,适用于较大视场下的高精度工业检测场景。产品亮点更轻巧与1/2″&…

【Database-01】达梦数据库Docker版下载安装

1、前往达梦数据库官网下载 https://www.dameng.com/1.1、选择数据库 - 数据库产品系 1.2、选择 达梦数据库管理系统(DM8) 1.3、点击试用下载 1.4、注册达梦账户 1.5、选择DM8 Docker镜像 https://www.dameng.com/list_103.html1.6、或者使用以下网址也…

雷达、定位、跟踪等信号处理邻域SCI期刊整理及推荐

雷达邻域SCI期刊整理及推荐:题名、刊物信息、撰写特点、审稿周期及投稿难度总结 定位/跟踪邻域SCI期刊整理及推荐:题名、刊物信息、撰写特点、审稿周期及投稿难度总结 估计/滤波/融合等信号处理邻域SCI期刊整理及推荐:题名、刊物信息、撰写…

Python数据分析与应用 | 数据分析工具Pandas

Pandas的数据结构分析 Pandas中有两个主要的数据结构:Series和DataFrame。 Series,一维的数据结构DataFrame,二维的,表格型的数据结构Series Series是一个类似一维数组的对象,它能够保存任何类型的数据,主要由一组数据和与之相关的索引两部分构成。左边是索引(index)…

树莓派——智能家居第一步

辛辛苦苦配了成功让树莓派开始工作了,开始搞智能家居!大体思路:基于工厂模式,分模块来实现上图分为三部分:主控、外设、控制主控我采用的是树莓派的4b4G版本,外设包括四个区域的灯(我的和上图有…

【Python】特征衍生

特征衍生1. 单变量特征衍生1.1 数据重编码1.2 高阶多项式2. 双变量特征衍生2.1 四则运算2.2 多项式衍生2.2.1 导包 & 数据2.2.2 二阶衍生2.2.3 三阶衍生3. 交叉组合3.1 导包 & 数据3.2 生成衍生列和名称3.3 独热编码1. 单变量特征衍生 1.1 数据重编码 连续变量 标准化…

对程序员来说最重要的小事——整洁代码

文章目录为什么要写整洁代码命名名副其实做有意义的区分类名、方法名函数短小只做一件事注释注释类型好注释坏注释格式目的垂直格式横向格式团队规则总结为什么要写整洁代码 现在阅读这篇博客的你不论是刚入行的新人还是开发了很多年的老鸟一定碰到过"祖传代码"&…

【原创】java+swing+mysql户籍管理系统设计与实现

户籍管理系统感觉跟学生管理系统有些类似,一个是对学生进行信息的管理,一个是对社会人员进行信息管理,难度系数基本一样,今天我们就来介绍一下使用javaswing和mysql进行户籍管理系统的开发。 功能分析: 户籍管理&…

【java 8】方法引用与构造器引用

📋 个人简介 💖 作者简介:大家好,我是阿牛,全栈领域优质创作者。😜📝 个人主页:馆主阿牛🔥🎉 支持我:点赞👍收藏⭐️留言&#x1f4d…

INT3断点和硬件断点

Ollydbg动态调试的时候需要打一些断点,断点分为INT3断点和硬件断点,本文是区分两个断点的文章。 目录 INT3断点 好处 坏处 硬件断点 原理 优点 缺点 INT3断点 OD中使用F2快捷键设置的断点就是INT3断点 打INT3断点的时候,断点处就会被…

Unity学习笔记--在Editor下实现一个有下拉菜单的文件路径记忆功能(保姆级教程)

目录前言需求分析知识前提一、下拉菜单的实现二、选取对应文件夹路径三、写入到.txt文件完整代码前言 最近需要在Unity编辑器下实现一个面板,有一个下拉菜单,其他人可以往这个下拉菜单里面添加一些文件夹路径,保证下次进来的时候能够直接通过…

Linux SPI-NAND 驱动开发指南

文章目录Linux SPI-NAND 驱动开发指南1 概述1.1 编写目的1.2 适用范围1.3 相关人员3 流程设计3.1 体系结构3.2 源码结构3.3 关键数据定义3.3.1 flash 设备信息数据结构3.3.2 flash chip 数据结构3.3.3 aw_spinand_chip_request3.3.4 ubi_ec_hdr3.3.5 ubi_vid_hdr3.4 关键接口说…

webrtc QOS笔记二 音频buffer数据不足生成很多gap的问题

webrtc QOS笔记二 音频buffer数据不足生成很多gap的问题 文章目录webrtc QOS笔记二 音频buffer数据不足生成很多gap的问题记录个iusse. 插入音频数据后,GetAudioInternal 进行操作决策: Normal:正常播放。 Acceleration:变声不变调的减速播放算法。 Pr…

【学习笔记】互联网金融:芝麻信用分的建模过程

学习资料: 数据分析学习随记 | 互联网金融行业2C授信模型(芝麻信用) 1. 背景 互联网金融的本质是风控。 1.1 数据分析师的角色 数据分析师在金融行业基本上有两种角色: 1.1.1 数据建模师 偏算法,但要很懂业务。要求对算法的理解较深&am…