微任务有哪些

Promise

await和async

宏任务有哪些

setTimeout

setInterval

DOM事件

AJAX请求

看下面的代码

<script>

console.log(1)

setTimeout(()=>{

    console.log("2")

},0)

Promise.resolve().then(()=>{

    console.log('3')

})

console.log(4)

</script>

我们发现打印的顺序是1-4-3-2

为什么是这样的顺序

先打印1-4这肯定是没有问题的

为啥先打印3然后才是2

因为3是Promise,Promise是微任务。

2是setTimeout，它是宏任务

微任务的执行时机比宏任务早。

所以先执行的是3然后才是2

我的结论

先同步后异步，先微后宏

微任务的执行时机比宏任务早哈~

说说下面代码的执行时机

<body>

    <div id="app"></div>

<script>

// 这一段是dom渲染的

let app=document.getElementById("app")

let cont='<p>我是p标签</p>'

app.append(cont)

// dom渲染结束

console.log(1)

setTimeout(()=>{

    console.log("2")

    alert('setTimeout2')

},0)

Promise.resolve().then(()=>{

    console.log('3')

    alert('3')

})

console.log(4)

</script>

</body>

上面这一段代码的执行分析

肯定是先执行1-4

然后根据先微任务后宏任务

就是输出3然后弹出3

然后就是说输出2然后弹出setTimeout2 【错误的】

因为微任务和宏任务之间还有一个DOM渲染

所以然后是dom渲染，最后才是宏任务

所以输出1-4后，执行的是DOM渲染。

然后才是输出2然后弹出setTimeout2

结论和运用的场景

微任务》DOM渲染》宏任务 看下面的例子

这个结论的运用场景

我们都做过echarts.我们知道渲染echarts的时候。

需要页面的DOM渲染完毕后，才能拿到节点进行渲染。

所以有的小伙伴会请请求的时机放在monuted()这个生命周期中

这样就可以确保返回来的数据肯定能够正常渲染在页面上。

其实根据上面这个结论。

你完全可以在created中去请求数据。返回来的的时候。

DOM肯定渲染完了。因为请求是宏任务。

宏任务的执行时机是在DOM渲染后的哈

求求你了看官

如果你觉得我写的还不错的话~~

请你给我点个一个推荐或者关注我！！

或者请我买一包辣条谢谢你了~~~

js中的宏任务和微任务详细讲解的更多相关文章

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

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

  2. javascript中的宏任务和微任务（一）

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

  3. javascript中的宏任务和微任务（二）

    js事件轮询执行顺序总结: 1)所有的同步任务都在主线程上执行,行成一个执行栈. 2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记. 3)主线程完成所有 ...

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

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

  5. js中的数组对象排序(方法sort()详细介绍)

    定义和用法 sort() 方法用于对数组的元素进行排序. 语法    arrayObject.sort(sortby) 参数sortby:可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意 ...

  6. Java中UIManager的几种外观的详细讲解

    Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...

  7. linux 中解压与压缩 常用操作详细讲解

    平时有时候 会在服务器进行一些文件的操作,比如安装一些服务与软件等等,都有解压操作,一般在 导出一些简单的服务器文件,也是先压缩后再导出,因此,在这里根据平时用到解压与压缩命令的频率来记录下: 1.最 ...

  8. JS的var和let的区别（详细讲解）

    let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版.下面我就来详细讲讲var和let的区别 相同点: var和let都有函数级作用域 不同点: (1)var是全局作用域 ...

  9. jQuery中$(function()与(function($)等的区别详细讲解

    (function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...

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

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

随机推荐

  1. 应用开发专家一席谈：开发低代码，上手低门槛，AppCube使能Citizen Developer，人人都是开发者

    摘要:让不确定因子变为确定性因子,把复杂留给平台,简单留给开发者,是软件开发效率改进一直努力的方向,也是低代码理念的来源. 本文分享自华为云社区<应用开发专家一席谈:开发低代码,上手低门槛,Ap ...

  2. jQuery模糊匹配checkbox全选 value实现checkbox部分或全部全选

    本文章总结jQuery实现checkbox三种情况的全选功能 第一种:等值全选,也称name的等值全选,通过checkbox的名称name实现. 第二种:模糊全选,也称id模糊全选,通过checkbo ...

  3. Solon cloud 常用配置

    一.配置示例: solon: app: name: "solon-consul-test" group: "test" solon.cloud.consul: ...

  4. 【PS算法理论探讨三】 Photoshop中图层样式之 颜色叠加/渐变叠加/图案叠加 算法原理初探讨。

    这三个表面上看上去很简单,我们就先描述简单的部分. 颜色叠加:这个和编辑菜单下的填充 颜色 基本是一个意思,相当于在原有的图层上部添加了一个纯实色的虚拟图层,选项里的不透明度和混合模式和普通的概念是一 ...

  5. 2019年第十届蓝桥杯国赛C++B组

    部分题目示意图来自网络,所以会带水印 最后编辑时间: 2021年5月12日 统一声明 如果不写默认带有常用头文件 如果不表明主函数默认表示在 void solve(){} 默认使用 using nam ...

  6. java8 Steam流及Optional的使用

    目录 Stream流: 获取流 1. list获取: 2. Map获取 3. 数组获取 流方法分类: 1. forEach(终结方法) 2. count计数(终结方法) 3.filter过滤 4.li ...

  7. OpenSCA受邀出席2023 Open Compliance Summit

    近日,由Linux基金会主办的2023 Open Compliance Summit(开放合规峰会,简称OCS)在日本东京隆重召开.悬镜安全旗下全球极客开源数字供应链安全社区OpenSCA受邀参与,O ...

  8. 2019 篇 - 分享数百个 HT的工业互联网 2D 3D 可视化应用案例

    继<分享数百个 HT 工业互联网 2D 3D 可视化应用案例>2018 篇,图扑软件定义 2018 为国内工业互联网可视化的元年后,2019 年里我们与各行业客户进行了更深度合作,拓展了H ...

  9. webpack配置自动打包相关的参数

  10. uni-app实现扫码签到

    1 uni.scanCode({ 2 success: res => { 3 this.$http({ 4 url: '/checkin/scanSign', 5 data: { 6 codeI ...