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

宏任务所处的队列就是宏任务队列,队列可以有多个,第一个队列只有一个任务就是执行主线程的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. 【Java】 Springboot+Vue 大文件断点续传

    同事在重构老系统的项目时用到了这种大文件上传 第一篇文章是简书的这个: https://www.jianshu.com/p/b59d7dee15a6 是夏大佬写的vue-uploader组件: htt ...

  2. 【Maven】下载安装(Linux)

    Maven官网下载地址: http://maven.apache.org/download.cgi 点选这个压缩包 wget或者上传都行 解压 tar -zxvf apache-maven-3.6.3 ...

  3. 树莓派3B+ 安装开源软路由 openwrt 并设置 无线网桥

    在openwrt官网上找到最新版的下载地址: https://openwrt.org/releases/19.07/start 注:   本文中使用的openwrt 系统为最新的稳定版系统,自带web ...

  4. Ubuntu系统中CUDA套件nvvp启动后报错Unable to make protected void java.net.URLClassLoader.addURL(java.net.URL) accessible: module java.base does not "opens java.net" to unnamed module @380fb434

    最近在看cuda方面的内容,需要对cuda代码做一些性能分析,于是需要使用nvvp,但是启动nvvp后报错:Caused by: java.lang.reflect.InaccessibleObjec ...

  5. [CEOI2018] Lottery 题解

    前言 题目链接:洛谷. 题意简述 给出序列 \(a_1 \ldots a_n\) 和常数 \(l \leq n\),定义: \[\operatorname{dis}(i, j) = \sum _ {k ...

  6. 部署MatterMost-开源团队协作平台

    前言 之前的文章有提到部署 MatterMost 的事. 本文来记录一下. 关于 MatterMost MatterMost 有点像 Slack 这种协作工具,而且和 GitLab 的集成还不错,正好 ...

  7. 9组-Beta冲刺-5/5

    一.基本情况(15分) 队名:不行就摆了吧 组长博客:9组-Beta冲刺-5/5 GitHub链接:https://github.com/miaohengming/studynote/tree/mai ...

  8. ViT和MAE模型结合初探

    介绍 transfomer在NLP领域的应用已经非常广泛,但是在CV领域的应用还比较少,主要是因为CV领域的数据是二维的,而transfomer是基于序列的,因此需要将二维数据转换成序列数据,这就是V ...

  9. 高阶函数之reduce

    let arrone = [1, 2, 3, 4] let arrtwo = [{ age: 1 }, { age: 2 }, { age: 3 }] let arrthree = [[1, 2, 3 ...

  10. Go进程内存占用那些事(二)

    0x01 最简单的Go程序 package main import ( "fmt" "time" ) func main() { fmt.Println(&qu ...