宏任务包括:<script>整体代码、setTimeoutsetIntervalsetImmediateAjax、DOM事件
微任务process.nextTickMutationObserverPromise.then catch finally

JS是单线程,碰见同步执行同步 直到执行完毕,遇到异步放到执行队列中去,异步(宏任务和微任务),在异步中微任务是优于宏任务执行的

 1 setTimeout(_ => console.log(4))
2
3 new Promise(resolve => {
4 resolve()
5 console.log(1)
6 }).then(_ => {
7 console.log(3)
8 })
9
10 console.log(2)

整个这一串代码我们所在的层级我们看做一个任务,其中我们先执行同步代码。第一行的 setTimeout 是异步代码,跳过,来到了 new Promise(…) 这一段代码。前面提到过,这种方式是一个构造函数,是一个同步代码,所以执行同步代码里面的函数,即 console.log(1),接下来是一个 then 的异步,跳过。最后一个是一段同步代码 console.log(2)。所以,这一轮中我们知道打印了1, 2两个值。接下来进入下一步,即之前我们跳过的异步的代码。从上往下,第一个是 setTimeout,还有一个是 Promise.then()。setTimeout 是宏任务的异步,Promise.then()是微任务的异步,微任务是优先于宏任务执行的,所以,此时会先跳过 setTimeout 任务,执行两个 Promise.then() 的微任务。所以此时会执行 console.log(3) 函数。最后就只剩下 setTimeout 函数没有执行,所以最后执行 console.log(4)。

综上:最后的执行结果是 1, 2, 3,  4。

解释下:

setTimeout就是作为宏任务来存在的,而Promise.then则是具有代表性的微任务

参考:https://www.jb51.net/article/223869.htm

js中宏任务和微任务的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. js 宏任务和微任务

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

  7. javascript中的宏任务和微任务(一)

    一.宏任务和微任务有哪些 宏任务:setTimeout,setInterval,ajax,dom,宏任务是由浏览器提供的 微任务:promise,async/await,微任务是由es6提供的 二.微 ...

  8. Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)

    Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子) 由其做动态编程时非常有用,必须符合js中的语法,用eval能够执行. var aaa="alert('这是变量中的语句')&q ...

  9. 从EventLoop到宏任务与微任务

    1.javascript是单线程的 javascript是单线程的,意思是javascript在同一时间内只能做一件事情. 为什么是单线程的? 因为js的主要用途是用于用户交互和操作DOM,如果是多线 ...

  10. 浏览器端时间循环与nodejs端时间循环的不同之处(宏任务与微任务)

    浏览器端与node端都有宏任务与微任务的概念.字面意思上看宏任务就是耗时间比较长的任务,而微任务是耗时短的任务. 在浏览器端,宏任务包括setTimeout,setInterval,微任务则包括Pro ...

随机推荐

  1. JavaScript ES6 类和对象 简单记录

    一/*1.在ES6之前如果定义一个类?通过构造函数来定义一个类*/ function Person(myName, myAge) { // 实例属性 // this.name = "lnj& ...

  2. MYSQL5.7实现递归查询

    根据父id查出所有子级,包括子级的子级,包括自身的id sys_tenant_company_relation为关联表, company_id为子id,parent_company_id为父id SE ...

  3. 排序方法-c语言

    在接触过得排序算法中中,较为常见的有冒泡排序.选择排序.归并排序.快速排序法,他们的区别在于稳定性.时间复杂度.空间复杂度等: 现简单复习一下冒泡排序: 思路非常简单,逐个比较相邻的两个元素,前一个元 ...

  4. Go_day01

    Go基础语法 注释 注释是为了增强代码的可读性,不会参与程序的一切功能, go语言注释分为单行注释与多行注释 单行注释 //双斜杠 每行都要添加 // 多行注释 /* */ 一次标记多行注释输入 pa ...

  5. 【Airtest相关】收集一些Airtest的介绍

    1.项目简介 ui自动化一直是个让人头疼的事,主要是因为系统兼容性难度较大和开发维护成本比较高, 以前使用过appium,通用性比较差,并且开发有一定的基础才行,更难以忍受的是后期的维护成本:然后接触 ...

  6. Python gdal读取MODIS遥感影像并结合质量控制QC波段掩膜数据

      本文介绍基于Python中GDAL模块,实现MODIS遥感影像数据的读取.计算,并基于质量控制QC波段进行图像掩膜的方法.   前期的文章Python GDAL读取栅格数据并基于质量评估波段QA对 ...

  7. mysql查询近N天的数据

    今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...

  8. 翟佳:StreamNative 组织构建之路丨声网开发者创业讲堂 • 第 5 期

    前言 翟佳,StreamNative 联合创始⼈,Apache Pulsar PMC 成员与 Committer.之前任职于 EMC,担任统⼀存储部⻔技术负责⼈. 在声网开发者创业讲堂 • 第 5 期 ...

  9. Bitcask — 日志结构的快速 KV 存储引擎

    Bitcask 介绍 Bitcask 是一种高性能的键值存储引擎,基于日志结构和哈希索引来提供高速的读写操作和数据持久性,适用于处理大量写入请求和快速查找键值对的应用场景. 核心概念 Bitcask ...

  10. 【ASP.NET Core】在node.js上托管Blazor WebAssembly应用

    由于 Blazor-WebAssembly 是在浏览器中运行的,通常不需要执行服务器代码,只要有个"窝"能托管并提供相关文件的下载即可.所以,当你有一个现成的 Blazor was ...