js的宏任务和微任务有哪些,是怎么执行的 ?
事件循环有宏任务和微任务;
宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的js代码,剩余队列任务有setTimeout setInterval ;
微任务所处的队列就是微任务队列,只能有一个队列,有process.nextTick() promise.then()
执行顺序:先执行第一个宏任务队列,在执行微任务队列,最后执行宏任务后面的队列 ;
总结: 事件循环先执行宏任务,其中同步任务立即执行,异步任务加载到对应的Event Queue 中,微任务也加载到对应的微任务的 Event Queue 中,所有的同步微任务执行完之后,如果发现微任务的 Event Queue 中有未执行完的任务,先执行他们这样算是完成了一轮事件循环。接下来查看宏任务的队列中是否有异步代码,有的话执行第二轮的事件循环,以此类推。
再来看一个复杂点的例子:
console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); })new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5')
})
})
//1、2、4、3、5
1、宏任务同步代码 console.log(‘1’)
2、setTimeout,加入宏任务 Event Queue,没有发现微任务,第一轮事件循环走完3、第二轮事件循环开始,先执行宏任务,从宏任务 Event Queue 中独取出setTimeout 的回调函数
4、同步代码 console.log(‘2’),发现 process.nextTick,加入微任务 Event Queue
5、new Promise,同步执行 console.log(‘4’),发现 then,加入微任务 Event Queue
6、宏任务执行完毕,接下来执行微任务,先执行 process.nextTick,然后执行Promise.then
7、微任务执行完毕,第二轮事件循环走完,没有发现宏任务,事件循环结束
js的宏任务和微任务有哪些,是怎么执行的 ?的更多相关文章
- 10分钟了解js的宏任务和微任务
熟悉宏任务和微任务以及js(nodejs)事件循环机制,在写业务代码还是自己写库,或者看源码都是那么重要 看了部分文档,自己总结和实践了一下 js中同步任务.宏任务和微任务介绍 同步任务: 普通任务 ...
- js中宏任务和微任务
宏任务包括:<script>整体代码.setTimeout.setInterval.setImmediate.Ajax.DOM事件微任务:process.nextTick.Mutation ...
- 宏任务和微任务:setTimeout和Promise执行顺序
先以一道面试题做引子: 写出这段程序的输出内容: setTimeout(function(){ console.log(); },); new Promise(function(a,b){ conso ...
- js中宏任务,微任务,异步,同步,执行的顺序
[微任务]包括:Promise , process.nextTick() *node.js里面的 [宏任务]包括:整体代码script, setTimeout setInterval ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- js中的宏任务与微任务
如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...
- js 宏任务和微任务
.宏任务(macrotask )和微任务(microtask ) macrotask 和 microtask 表示异步任务的两种分类. 在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首 ...
- JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)
1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...
- JS异步之宏队列与微队列
1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待 ...
- JS中EventLoop、宏任务与微任务的个人理解
为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...
随机推荐
- tf.metrics 使用过程中发现的一些问题
起因是看到了这么一个帖子: http://www.cocoachina.com/cms/wap.php?action=article&id=86347 简短来说就是下面的代码 运行起来结果 ...
- mendeley存储是有限的吗
用了mendeley好多年,总是有一个疑问,那就是这东西的云存储空间是不是有限的,如果是有限的话那么上限是多少?这东西不论是app还是桌面端都没有这个空间信息的大小,但是这东西必然是有上限的,那么这个 ...
- springboot实现事务管理
Springboot实现事务步骤1.在启动类加上@EnableTransactionManagement 2.在业务层方法上加 @Transactional(rollbackFor = Excepti ...
- Java基础之时间类
- [考试记录] 2024.8.10 csp-s 模拟赛18
80 + 20 + 0 + 70 = 170 第三题应该有 10 分暴力的,但我没打. T1 星际旅行 题面翻译 总共有n个节点,m条路径,要求其中m-2条路径走两遍,剩下2条路径仅走一遍,问不同的路 ...
- 07-canvas绘制虚线
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- 使用 preloadComponents 进行组件预加载
title: 使用 preloadComponents 进行组件预加载 date: 2024/8/18 updated: 2024/8/18 author: cmdragon excerpt: 摘要: ...
- Java Swing Loading转圈的进度提示框
Java Swing Loading转圈的进度提示框 具体只需要两个类 AnimatedPanel.java InfiniteProgressPanel.java 前因:我们开发的web应用,有个奇葩 ...
- plotly dash
https://community.plotly.com/t/callback-on-graph-slider-change-which-property-to-use-as-input/33979/ ...
- Unity 中 Color 与 Color32 的区别
1. 存储方式 Color用四个浮点数(float)来表示RGBA,取值范围均是0到1 举例: var orange = new Color(1f, 0.5f, 0f, 1f); 而Color32使用 ...