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

宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的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. 对比python学julia(第二章)--(第三节)玫瑰曲线—数学之美

    3.1.问题描述 在数学世界中有一些美丽的曲线图形,有螺旋线.摆线.双纽线.蔓叶线且.心脏线.渐开线.玫瑰曲线.蝴蝶曲线-- 这些形状各异.简有繁别的数学曲线图形为看似枯燥的数学公式披上精彩纷呈的美丽 ...

  2. Apache COC闪电演讲总结【OSGraph】

    大家能看到我最近一直在折腾与OSGraph这个产品相关的事情,之前在文章<妙用OSGraph:发掘GitHub知识图谱上的开源故事>中向大家阐述过这个产品的设计理念和应用价值.比方说以下问 ...

  3. 【Java】在树结构中给节点追加数据

    一.功能需求 有个树状组件,展示区域层级,每个区域节点需要展示该地区下的统计信息 从来没做过,给我整不会了属实是 二.功能分析 原型有功能和老系统代码,查看源码后发现的结构框架 1.树组件是自己用ul ...

  4. 【JDBC】Extra01 Oracle-JDBC

    关于驱动包依赖: 官网提供的地址: https://www.oracle.com/database/technologies/jdbc-drivers-12c-downloads.html Maven ...

  5. 鹏城实验室——启智平台使用外部docker镜像 —— 实测并不可用,该功能可用性较低

    参考: https://bbs.openi.org.cn/forums/5492 需要注意,目前只有NVIDIA GPU运行环境下允许使用外部docker镜像. 注意: 对于该功能实测后发现可用性不高 ...

  6. 安装python库roboschool运行报错:ImportError: libpcre16.so.3: cannot open shared object file——解决方法

    如题: 运行roboschool运行报错. 操作系统: Ubuntu ImportError: libpcre16.so.3: cannot open shared object file: No s ...

  7. python学习之---迭代器与生成器

    什么是迭代器 可迭代对象: 可以通过for循环来实现遍历,例如list.string.dict 迭代器: 不仅可以使用for循环,还可以使用next()方法.__iter__() next():获取容 ...

  8. 瑞芯微|如何让拥有双网口的Linux设备实现数据包转发?【超实用】

    本文主要讲解如何,解决基于3568实现双网口互通问题. 一.组网 如下图所示: rk3568自带2个千兆以太口,对应网卡名称为:eth0.eth1 pc1和pc2分别连接这2个网口 pc1与eth0连 ...

  9. 【Mac渗透测试】之SQL注入Demo

    目录: 一.下载安装sqlmap 二.SQL注入 三.参考文章 一.下载安装sqlmap 1.官网地址:http://sqlmap.org/#download git下载: git clone --d ...

  10. .net7(.net core) 依赖注入:从 AddSingleton 注册的类里面访问 AddScoped 的问题

    记录一下以免忘记. 今天从NopCommerce开源项目里面把它的任务调度类拆出来到我的项目用的时候,发现报错,报错信息如下 Some services are not able to be cons ...