js 事件流程

描述

  • JavaScript 的执行是单线程的,后面的任务需要等待前面的任务完全完成后,再去执行。
  • DOM 事件(文件的加载等)、定时器、网络请求等事件,并不会消耗 CPU,这些事件无需等候,所以出现了异步。
  • 主线程进行中,将异步事件交给专有模块去处理,当主线程完成后,再去读取异步事件归并到主线程进行处理。

事件流程

  1. 主线程读取代码,形成响应的堆和任务栈
  2. 遇到异步的时候,将事件加入到任务队列
  3. 主线程执行完毕后,查询任务队列,执行队列中的事件
  4. 按顺序,先执行微任务
  5. 再次读取任务队列,如果不再有微任务,开始按顺序执行宏任务
  6. 队列执行完毕

在这里插入图片描述

let timeOut1 = setTimeout(()=>{
    console.log('1');
    let promise1 = new Promise(function (resolve, reject) {
        console.log('2');
        let timeOut2 = setTimeout(()=>{
            console.log('3')
        }, 0);
        resolve();
    }).then(function () {
        console.log('4')
    })
}, 0);
console.log('5');
let timeOut3 = setTimeout(()=>{
    console.log('6')
}, 0)
async function func1(){
    console.log('7');
    await func2();
    console.log('8');
}
function func2(){
    console.log('9');
}
func1();
let promise2 = new Promise(function (resolve, reject) {
    console.log('10');
    resolve();
}).then(function () {
    console.log('11');
}).catch(function () {
    console.log('12');
})
console.log('13')
// 5 7 9 10 13 8 11 1 2 4 6 3
  1. 将 timeOut1 加入任务队列 A
  2. 主线程,打印 5
  3. 将 timeOut3 加入任务队列 A
  4. 主线程,执行 func1,打印 7
  5. 执行 func2,打印 9
  6. 将 await 定义域内后面的事件统一添加到任务队列 A
  7. 主线程,执行 promise2,打印 10
  8. 将 promise2.then 添加到任务队列 A
  9. 主线程,打印 13
  10. 当前主线程执行完毕,开始读取任务队列 A
  11. 当前任务队列 A:timeOut1、timeOut3、await、promise2.then
  12. 先执行微任务,后执行宏任务
  13. 执行 await,打印 8
  14. 当前任务队列 A:timeOut1、timeOut3、promise2.then
  15. 执行 promise2.then,打印 11
  16. 当前任务队列 A:timeOut1、timeOut3
  17. 任务队列 A,所有微任务执行完毕,开始按顺序执行宏任务
  18. 执行 timeOut1,打印 1
  19. 执行 promise1,打印 2
  20. 将 timeOut2 加入任务队列 A
  21. 将 promise1.then 加入任务队列 A
  22. 当前任务队列 A:timeOut3、timeOut2、promise1.then
  23. 先执行微任务,后执行宏任务
  24. 执行 promise1.then,打印 4
  25. 当前任务队列 A:timeOut3、timeOut2
  26. 任务队列 A,所有微任务执行完毕,开始按顺序执行宏任务
  27. 执行 timeOut3,打印 6
  28. 执行 timeOut2,打印 3

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Unity VR开发】结合VRTK4.0:创建一个按钮(Option Button)

语录: 如同天上降魔主,真是人间太岁神。 前言: 选项按钮是一种提供多项选择选项的方法,其中只有一个按钮可以处于激活状态,激活另一个按钮时将确保组中的所有其他按钮都已停用。我们可以使用嵌套在预制件中的预制件来实…

C++命名空间域namespace与域作用限制符: :,cin,cout输入输出简单介绍

TIPS C是在C的基础之上,容纳进去了面向对象编程思想,并增加了许多有用的库,以及编程范式等C总计63个关键字,C语言32个关键字,具体没有必要先不去管它 域,命名空间域与namespace关键字 cpp需要解决的第一…

数据库中的视图及三级模式结构

文章目录 一、视图二、数据库三级模式结构 一、视图 简单地说,视图可以看成是一个窗口,它所反映的是一个表或若干表的局部数据,可以简化查询语句。视图一经定义,用户就可以把它当作表一样来查询数据。 但视图和基本表不同&#…

400以内的蓝牙耳机哪款好?400以内蓝牙耳机排行榜

谈起TWS,无论是传统的音频厂商还是手机厂商,都是其不可或缺的重要产品线,现在很多许多蓝牙耳机都不是千篇一律得形状,市场也鲜有商家在外观上下功夫,下面分享几款400元以内,内外兼具的耳机品牌。 一、南卡…

Pytorch实现图像风格迁移(一)

图像风格迁移是图像纹理迁移研究的进一步拓展,可以理解为针对一张风格图像和一张内容图像,通过将风格图像的风格添加到内容图像上,从而对内容图像进行进一步创作,获得具有不同风格的目标图像。基于深度学习网络的图像风格迁移主要…

LeetCode热题HOT100:76. 最小覆盖子串,84.柱状图中最大的矩形、96. 不同的二叉搜索树

LeetCode 热题 HOT 100 76. 最小覆盖子串 题目:给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串,则返回空字符串 “” 。 注意: 对于 t 中重复字符,我们寻找的子字…

ADManager Plus:简化 Active Directory 管理的完美工具

在企业中,Active Directory(AD)是一个非常重要的组件,用于管理和控制所有计算机和用户的访问权限。然而,AD的管理和维护需要一定的技术能力和时间成本。为了简化这个过程,ManageEngine 推出了 ADManager Pl…

Leetcode-二叉树

1.中序-后序构建二叉树 106. 从中序与后序遍历序列构造二叉树 - 力扣(LeetCode) 1. 首先根据后序(左右中)确定顶点元素; 2. 根据顶点元素划分中序序列; 3. 根据划分中序序列中-左子树的长度,进…

数据类型及变量的定义、使用和注意事项

数据类型 计算机存储单元 变量的定义格式: 数据类型 变量名数据值; 我们知道计算机是可以用来存储数据的,但是无论是内存还是硬盘,计算机存储设备的最小信息单元叫“位( bit ) ",我们又称之为“比特位”,通常用…

除了Java,还可以培训学习哪些IT技术?

除了Java,还可以培训学习哪些IT技术? 转行IT学Java似乎已经成为很多人的首选,原因无非是开发技术含量高、开发有前景、开发是一个互联网企业的核心岗位,最重要的是开发薪资待遇高。但其实只单纯因为薪资选择Java的话,小…

百万赞同:网络安全为什么缺人? 缺什么样的人?

1.网络安全为什么缺人? 缺人的原因是有了新的需求 以前的时候,所有企业是以产品为核心的,管你有啥漏洞,管你用户信息泄露不泄露,我只要做出来的产品火爆就行。 这一切随着《网络安全法》、《数据安全法》、《网络安全审查办法》…

什么是机器学习?

目录 简介 机器学习可以做什么 机器学习未来的趋势 总结 简介 机器学习是一种人工智能领域中的技术,其主要目的是让计算机能够自动进行模式识别、数据分析和预测。 机器学习的起源可以追溯到20世纪50年代,当时美国的Arthur Samuel在一篇论文中提出了相关…

静态时序分析Static Timing Analysis4——多时钟域和多时钟时序检查

文章目录 前言一、多时钟域时序分析1、慢时钟域到快时钟域1.1 建立时间检查1.2 保持时间检查1.3 多周期检查 2、快时钟域到慢时钟域2.1 建立时间检查2.2 保持时间检查2.3 合理的约束 3、总结 二、多时钟1、整数倍关系2、非整数倍关系 三、相位移动 前言 2023.4.12 这里讲的多时…

助力研发效能变革,第七届Techo TVP 开发者峰会圆满落下帷幕

引言 在互联网数字企业结束“野蛮扩张”、追求高质量增长的今天,研发效能已然成为企业关注的核心命题。伴随着云原生概念在软件领域的落地生根,云原生正驱动软件应用设计、实现、部署及运维方式的巨变,为研发效能治理带来了新的挑战与机遇&am…

vue-router3.0处理页面滚动部分源码分析

在使用vue-router3.0时候,会发现不同的路由之间来回切换,会滚动到上次浏览的位置,今天就来看看这部分的vue-router中的源码实现。 无论是基于hash还是history的路由切换,都对滚动进行了处理,这里分析其中一种即可。 无…

SpringBoot

文章目录 创建SpringBoot项目快速入门创建Controller启动项目 打包项目创建工件 SpringBoot概述SpringBoot优点起步依赖切换Web服务器 配置文件配置文件application.propertiesapplication.ymlapplication.yaml 三种配置文件优先级yaml格式读取配置数据(yml为例&…

windows系统管理_Windows server 2016 组管理与授权

组账户的概述 在 windows 服务器中,当我们需要为多个用户设置相同的权限时,一个一个的逐一设置会比较 麻烦,这个时候我们就需要用到另一种模式,组账户,使用此账户来进行简化操作。 在以后的职场中,每家公司…

Windows环境下调试DAB-DETR与Deformable-DETR

先前都是在服务器上运行DETR的相关程序,服务器使用的是Linux,所以运行较为简单,但如果想要简单的debug的话就没必要使用服务器了,今天便来在Winodws环境下调试DETR类项目,这里以Deformable-DETR与DAB-DETR为例。 首先是…

I.MX6U开发板使用OTG烧写系统

1.系统烧写 在实际的产品开发中肯定不可能通过网络来运行,否则没网的时候产品岂不 是就歇菜了。因此我们需要将 uboot、linux kernel、.dtb(设备树)和 rootfs 这四个文件烧写到板子 上的 EMMC、NAND 或 QSPI Flash 等其他存储设备上,这样不管有没有网络我…

R语言ggplot2 | 绘制随机森林重要性+相关性热图

📋文章目录 原图复现准备数据集及数据处理构建不同分类随机森林模型的并行计算绘制随机森林变量重要性柱状图计算数据集的相关性热图可视化合并随机森林重要性和热图 附上所有代码 在文献中,我们经常遇到随机森林和相关性热图的组合图片(下图)&#xff0…
最新文章