hook 循环点击事件用哪个_JS 事件循环 event loop,看完你可以答对 90% 的事件循环题...

本文不保证能说明透彻,因为它本来就存在着混乱,但力求讲到点子上。

比较下面这几个的执行顺序setTimeout

setInterval

setImmediate (nodejs 支持,

new Promise(cb) 和 promise.then(cb)(promise 是 Promiose 的实例)

process.nextTick(nodejs)

还有一些另外的(暂时不考虑)socket.on('close', cb) close callback(nodejs)

分类

同步执行

new Promise(cb) cb 代码会同步执行,其实不属于考虑范畴了

microTask 微任务process.nextTick tickTask

promise.then(cb) microTask

microTask (在 nodejs)可以进一步划分为 tickTask 和 microTask,都是微任务队列,同类型的微任务先进先执行

优先级是 tickTask > microTask

macroTask 宏任务setTimeout

setInterval 优先级同 setTimeout,谁先被推到 timers 队列谁就先执行

setImmediate

在不同类型宏任务切换的间隙,一旦微任务队列有任务则会把微任务队列先执行完,然后继续执行下一个类型的宏任务队列。(注意是切换的时候,如果已经进入执行阶段是让该类型的宏任务执行完然后检查微任务队列,如果宏任务执行时又加入了同类型的宏任务,则会在下一个循环里面执行)

进入 timers 或者 check 或者其他的宏任务队列时,如果 microTask 任务队列中没有任务,则会在执行完优先执行的宏任务队列之后再检查 microTask 任务队列(注意:如果某个 macroTask 执行时推入了新的 microTask,它依然会先把这个类型的宏任务队列执行完,然后切换下一个类型宏任务队列时先执行微任务),如果有则执行完 microTask,然后进入下一个类型的 macroTask 队列

这里有一个非确定情况,setImmediate 和 setTimeout 的执行顺序在 nodejs 中不是固定的(nodejs 开发者这么说)。 For example, if we run the following script which is not within an I/O cycle (i.e. the main module), the order in which the two timers are executed is non-deterministic, as it is bound by the performance of the process

做个测试,下面的执行是不确定的,没有实际的意义

setTimeout(() => {

console.log('1 setTimeout')

setTimeout(() => {

console.log('2 setTimeout')

}, 0)

setImmediate(() => {

console.log('3 setImmediate')

})

}, 0)

setImmediate(() => {

console.log('4 setImmediate')

})

nodejs

可能

4 setImmediate

1 setTimeout

3 setImmediate

2 setTimeout

也可能

1 setTimeout

4 setImmediate

3 setImmediate

2 setTimeout

setTimeout 有一个隐形前提,它的第二个参数,也就是延迟执行的时间,最小是 4ms,即使指定的 0,另外注意它是 n ms 之后才可能执行,并不是 n ms 时就会执行,它的执行时间是不确定的,只能知道在 n ms 之前它不会执行。

setInterval 回调内如果是一个 while 循环,即使时间设定的 0,它也不会推无限多个回调到 timers 队列中,而是要等到这个执行完,才会把下一个回调推入 timers 队列,用 while 执行 2S 之后,清除掉 interval,发现回调只执行了一次,而不是执行很多次。

看下面的例子,这说明 setInterval 会推一个回调到 timers 队列,然后执行,然后再推下一个回调。

let count = 0

setTimeout(() => {

console.log('1 setTimeout')

}, 0)

const i = setInterval(() => {

console.log('2 setInterval')

count++

if (count === 5) {

clearInterval(i)

}

setTimeout(() => {

console.log('3 setTimeout ', count)

}, 0)

}, 0)

setTimeout(() => {

console.log('4 setTimeout')

}, 0)

---

1 setTimeout

2 setInterval

4 setTimeout

3 setTimeout 1

2 setInterval

3 setTimeout 2

2 setInterval

3 setTimeout 3

2 setInterval

3 setTimeout 4

2 setInterval

3 setTimeout 5

nodejs 事件循环

上述基本都是 macroTask 宏任务

setTimeout(() => {

console.log('1 setTimeout')

setTimeout(() => {

console.log('2 setTimeout')

}, 0)

setImmediate(() => {

console.log('3 setImmediate')

})

setTimeout(() => {

console.log('4 setTimeout')

}, 0)

setImmediate(() => {

console.log('5 setImmediate')

})

}, 0)

这个结果说明执行过程是整个队列执行完再执行下一个队列下面结果说明在同一事件循环内, check 队列会执行完之后再去执行 timers 队列。(check 未必比 timers 快)

1 setTimeout

3 setImmediate

5 setImmediate

2 setTimeout

4 setTimeout

如果在 check 队列执行期间推入 microTask 任务,那就先让当前 check 队列执行完,然后再执行 microTask,再执行 timers 队列。

setTimeout(() => {

console.log('1 setTimeout')

setTimeout(() => {

console.log('2 setTimeout')

}, 0)

setImmediate(() => {

console.log('3 setImmediate')

new Promise(res => res()).then(() => {

console.log('4 promise')

})

process.nextTick(() => {

console.log('5 nextTick')

})

})

setTimeout(() => {

console.log('6 setTimeout')

}, 0)

setImmediate(() => {

console.log('7 setImmediate')

})

}, 0)

执行结果,两个 setImmediate 被放到 check 队列,check 队列中的 setImmediate 要先全部执行完,然后再下一步,而下一步过程中 microTask 就会执行。

1 setTimeout

3 setImmediate

7 setImmediate

5 nextTick

4 promise

2 setTimeout

6 setTimeout

注意下面代码和上面代码的区别

setTimeout(() => {

console.log('1 setTimeout')

setTimeout(() => {

console.log('2 setTimeout')

}, 0)

setImmediate(() => {

console.log('3 setImmediate')

})

new Promise(res => res()).then(() => {

console.log('4 promise')

})

process.nextTick(() => {

console.log('5 nextTick')

})

setTimeout(() => {

console.log('6 setTimeout')

}, 0)

setImmediate(() => {

console.log('7 setImmediate')

})

}, 0)

---

1 setTimeout

5 nextTick

4 promise

3 setImmediate

7 setImmediate

2 setTimeout

6 setTimeout

题目

题目 1

setTimeout setInterval 是不是相同优先级?是否被推到同一个队列

setTimeout(() => {

console.log('1 timeout')

}, 0)

setInterval(() => {

console.log('2 interval')

}, 0)

setTimeout(() => {

console.log('3 timeout')

}, 0)

setInterval(() => {

console.log('4 interval')

}, 0)

setTimeout(() => {

console.log('5 timeout')

}, 0)

题目 2

setTimeout(() => {

console.log('1 setTimeout')

setTimeout(() => {

console.log('2 setTimeout')

}, 0)

setImmediate(() => {

console.log('3 setImmediate')

setImmediate(() => {

console.log('4 setImmediate')

})

process.nextTick(() => {

console.log('5 nextTick')

})

})

setImmediate(() => {

console.log('7 setImmediate')

})

setTimeout(() => {

console.log('8 setTimeout')

}, 0)

}, 0)

总结

微任务(microTask)是大爷,宏任务(macroTask)得让着微任务,但是一旦让一个类型的宏任务开始执行,那就得等这个类型的宏任务执行完,然后才能执行微任务!!!在宏任务中被推入队列的宏任务得在下一轮才能开始执行,这一轮没新宏任务的份。

欢迎大家关注我的掘金和公众号,算法、TypeScript、React 及其生态源码定期讲解。

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

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

相关文章

探究 Java 应用的启动速度优化

简介: 在高性能的背后,Java 的启动性能差也令人印象深刻,大家印象中的 Java 笨重缓慢的印象也大多来源于此。高性能和快启动速度似乎有一些相悖,本文将和大家一起探究两者是否可以兼得。 作者 | 梁希 高性能和快启动速度&#x…

阿里云刘伟光:金融核心系统将步入分布式智能化的时代

1月18日,阿里云在京发布金融核心系统转型“红宝书”,并推出“金融级云原生工场”,通过新的建设理念和相应的全链路平台技术,以及先进的部署体系,支撑金融机构建设面向未来的新一代分布式智能化核心系统。 阿里云智能新…

计算机动漫设计VR主要学什么,VR动漫制作怎么学?

现在虚拟现实技术的确是火了一把,很多人渐渐都知道了虚拟现实技术的存在,但是虚拟现实技术实际上不是大家了解的那么简单,虚拟现实技术包括的方面其实很多,尤其是在一些视频资源上面,虚拟现实技术可以划分在不同的领域…

5分钟搞定Loki告警多渠道接入

简介: Loki是受Prometheus启发的水平可扩展、高可用、多租户日志聚合系统。用户既可以将Loki告警直接接入SLS开放告警,也可以先将Loki接入Grafana或Alert Manager,再借助Grafana或Alert Manager实现Loki间接接入SLS开放告警。 直接接入 您可…

eclipse手动pom本地包_(转)如何在maven的pom.xml中添加本地jar包

1 maven本地仓库认识maven本地仓库中的jar目录一般分为三层:图中的1 2 3分别如下所示:1 groupId2 artifactId3 version4 jar包的依赖如果要将maven本地仓库中的jar包添加到项目中,直接打开4 xx.pom文件,将改jar包的相关依赖复制po…

Fortinet SD-Branch保障医疗服务机构安全组网

近年来,网络攻击者窃取有价值个人信息的违法行为屡见不鲜,医疗服务机构已成为网络攻击的重要目标。由于医疗服务机构的运营架构多呈分散模式,在应对网络安全及运营方面,尤其面临着更为复杂的安全挑战。网络专业人员匮乏、带宽受限…

当微服务遇上 Serverless | 微服务容器化最短路径,微服务 on Serverless 最佳实践

简介: 阿里云Serverless应用引擎(SAE)初衷是让客户不改任何代码,不改变应用部署方式,就可以享受到微服务K8sServerless的完整体验,开箱即用免运维。 前言 微服务作为一种更灵活、可靠、开放的架构&#x…

学计算机就业靠谱吗,2018年计算机专业就业怎么样?

由孙中山先生创办的至今已有一百多年办学传统,已经成为一所国内一流、国际知名的现代综合性大学。涉足的领域较广,有法律、医学等领域,每个领域都取得不俗的成绩。该校的计算机专业自开设以来也颇受学生欢迎,2018年计算机专业就业…

neon浮点运算_ARM 浮点运算详解

原标题:ARM 浮点运算详解一:早期 上的浮点模拟器:早期的ARM没有协处理器,所以是由CPU来模拟的,即所需浮点运算均在浮点运算模拟器(float math emulation)上进行,需要的浮点运算,常要耗费数千个循…

Serverless 工程实践 | 细数 Serverless 的配套服务

简介: 上文说到云计算的十余年发展让整个互联网行业发生了翻天覆地的变化,Serverless 作为云计算的产物,或者说是云计算在某个时代的表现,被很多人认为是真正意义上的云计算,关于“Serverless 是什么”这个问题&#x…

程序员在想些什么?拒绝盲猜,CSDN帮你精准洞察 Ta 们的心

CSDN 推出《开发者研究与洞察》服务。基于3200万开发者的资源,从开发者视角出发,聚焦开发者“关注”、“使用”、“体验”三方面,帮助技术推广者打造技术品牌、优化技术产品的市场投放策略、提升技术产品的开发者使用体验,直接聆听…

伴鱼:借助 Flink 完成机器学习特征系统的升级

简介: Flink 用于机器学习特征工程,解决了特征上线难的问题;以及 SQL Python UDF 如何用于生产实践。 本文作者陈易生,介绍了伴鱼平台机器学习特征系统的升级,在架构上,从 Spark 转为 Flink,解…

小型微型计算机系统退回修改,小型微型计算机系统

基本信息期刊名称小型微型计算机系统《中国计算机系统杂志》的英文名称出版周期每月发布了ISSN 1000-1220发布CN 21-1106 / TP邮政编码8-108组织者中国科学院沉阳计算技术研究所出版地: 辽宁省沉阳市期刊首页网址提交URL包含在中/荣誉CSCD核心期刊中国科学引文Pж(AJ)摘要杂志C…

coding ssh端口指定_443 端口的 SSH 服务

SSH 的默认端口是 22 ,有时您或您的公司的防火墙会完全屏蔽掉这个端口。如果此时您不方便通过 HTTPS 方式进行 Git 操作,您可以使用 Coding.net 提供的 443 端口的 SSH 服务,您需要确保 SSH 已配置成功,然后执行:$ ssh…

亚信安全发布《2022年网络安全发展趋势及十大威胁预测》

回顾2021年,从防御的角度来看,仍然是充斥着压力和焦虑的一年。勒索软件攻击数量再破纪录、高危漏洞与供应链攻击所造成的持续威胁困扰着大家。 展望2022年,面对数字化、云化、智能化发展的当下,安全更应该放眼于未来。亚信安全期…

Flink 1.14 新特性预览

简介: 一文了解 Flink 1.14 版本新特性及最新进展 本文由社区志愿者陈政羽整理,内容源自阿里巴巴技术专家宋辛童 (五藏) 在 8 月 7 日线上 Flink Meetup 分享的《Flink 1.14 新特性预览》。主要内容为: 简介流批一体Checkpoint 机制性能与效率…

html查看程序魅族,怎么查看源代码(什么工具能查出一个程序的代码)

什么工具能查出一个程序的代码如果我理解正确,那么您正在寻找可以通过分析exe来启动源代码的程序。 这属于“逆向工程”类别。 一般来说,最好将exe反编译为程序集,但是查看已编译的代码非常麻烦。如果将其反编译为高级语言,则很有…

2021 年云原生技术发展现状及未来趋势

简介: 作者于雨担任了 2021 年 GIAC 会议云原生专场的出品人兼讲师,组织了前后四个场子的演讲,在这个过程中作者同时作为听众从这些同行的演讲中学到了很多非常有用的知识。本文算是对 2021 GIAC 云原生专场的侧记,管中窥豹&#…

像搭“乐高”一样实现整合式网络安全体系

部署多种防护产品,却无法形成防御合力,是当前很多企业网络安全建设都面临的挑战。网络安全能力整合是企业的刚需,也是行业发展的大势所趋。虽然Gartner 提出的网络安全网格架构(CSMA,Cybersecurity Mesh Architecture …

python yaml读_python中读取yaml文件的方法是什么

python中读取yaml文件的方法是什么发布时间:2020-08-05 11:50:36来源:亿速云阅读:110作者:小新小编给大家分享一下python中读取yaml文件的方法是什么,希望大家阅读完这篇文章后大所收获,下面让我们一起去探…