事件循环有宏任务和微任务;

宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的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的宏任务和微任务有哪些,是怎么执行的 ?的更多相关文章

  1. 10分钟了解js的宏任务和微任务

    熟悉宏任务和微任务以及js(nodejs)事件循环机制,在写业务代码还是自己写库,或者看源码都是那么重要 看了部分文档,自己总结和实践了一下 js中同步任务.宏任务和微任务介绍 同步任务: 普通任务 ...

  2. js中宏任务和微任务

    宏任务包括:<script>整体代码.setTimeout.setInterval.setImmediate.Ajax.DOM事件微任务:process.nextTick.Mutation ...

  3. 宏任务和微任务:setTimeout和Promise执行顺序

    先以一道面试题做引子: 写出这段程序的输出内容: setTimeout(function(){ console.log(); },); new Promise(function(a,b){ conso ...

  4. js中宏任务,微任务,异步,同步,执行的顺序

     [微任务]包括:Promise ,    process.nextTick() *node.js里面的  [宏任务]包括:整体代码script,  setTimeout    setInterval ...

  5. js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  6. js中的宏任务与微任务

    如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...

  7. js 宏任务和微任务

    .宏任务(macrotask )和微任务(microtask ) macrotask 和 microtask 表示异步任务的两种分类. 在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首 ...

  8. JS中的执行机制(setTimeout、setInterval、promise、宏任务、微任务)

    1.执行机制 JS 是单线程的,处理 JS 任务(程序)只能一个一个顺序执行,所以 JS 中就把任务分为了同步任务和异步任务.同步的进入主线程先执行,异步的进入Event Table并注册函数,当指定 ...

  9. JS异步之宏队列与微队列

    1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待 ...

  10. JS中EventLoop、宏任务与微任务的个人理解

    为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...

随机推荐

  1. 【Linux】快速文件交互 lrzsz

    首先需要安装依赖: yum install -y lrzsz 没有此依赖,Linux提示找不到命令: [root@localhost ~]# rz -bash: rz: 未找到命令 [root@loc ...

  2. 【Mybatis】Bonus02 补充

    关于主键生成问题 Mybatis的主键生成是基于JDBC的使用主键[getGeneratedKeys()]方法 也就是说,必须要JDBC驱动的支持才行 @Test public void junitT ...

  3. 【SpringBoot】15 数据访问P3 整合Mybatis

    重新建立一个SpringBoot工程 选择依赖组件 然后删除不需要的Maven&Git文件 还是先查看我们的POM文件 整合Mybatis的组件多了这一个,默认的版本是3.5.4 然后再看看整 ...

  4. NVIDIA的人形机器人的基础模型Project GR00T已在实体机器人上进行展示

    原文地址: https://blogs.nvidia.com/blog/isaac-generative-ai-manufacturing-logistics/ 项目GR00T为人型机器人开发谢幕 在 ...

  5. mybatis-plus系统化学习之查询专题

    1.背景 查询在实际生产中用得最多,也最灵活. 2.查询案例 表结构: CREATE TABLE `sys_user` ( `id` int(32) NOT NULL AUTO_INCREMENT C ...

  6. ELT已死,EtLT才是现代数据处理架构的终点!

    提到数据处理,经常有人把它简称为"ETL".但仔细说来,数据处理经历了ETL.ELT.XX ETL(例如,Reverse ETL.Zero-ETL)到现在流行的EtLT架构几次更迭 ...

  7. [学习笔记] 单调队列优化DP - DP

    单调队列优化DP 简单好想的DP优化 真正的教育是把学过的知识忘掉后剩下的东西 -- *** 对于一个转移方程类似于 \(dp[i]=max(min)\{dp[j]+b[j]+a[i]\}\ \ x_ ...

  8. 秒懂全文:盘点13个各具特色的AI智能阅读助手工具

    在当今信息爆炸的时代,AI阅读工具正在革新我们的阅读方式,成为了提高效率.优化阅读体验的关键. 这类AI阅读辅助工具,只需要上传文件或者输入链接,便可以直接以聊天对话的形式进行一键总结和智能问答,满足 ...

  9. 计算机二级c语言学习总结

    咱就是说,还有一周多久要进行计算机二级考试了,咱开始在b站上找一些视频进行学习.毕竟咱c语言实战经验自认为是完全足够应付计算机二级了,所以,咱现在的学习目标是先把计算机二级的大概知识过一遍,进行查漏补 ...

  10. Diskpart 操作

    DiskPart 是 Windows 操作系统中的一个命令行工具,用于管理磁盘分区.它可以创建.删除.格式化和调整分区大小,还可以设置活动分区等.以下是一些常用的 DiskPart 命令和操作步骤. ...