js中的宏任务和微任务详细讲解
微任务有哪些
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中的宏任务和微任务详细讲解的更多相关文章
- js中的宏任务与微任务
如果你已经知道了js中存在宏任务和微任务,那么你一定已经了解过promise了.因为在js中promise是微任务的一个入口. 先来看一道题: setTimeout(function(){ conso ...
- javascript中的宏任务和微任务（一）
一.宏任务和微任务有哪些 宏任务:setTimeout,setInterval,ajax,dom,宏任务是由浏览器提供的 微任务:promise,async/await,微任务是由es6提供的 二.微 ...
- javascript中的宏任务和微任务（二）
js事件轮询执行顺序总结: 1)所有的同步任务都在主线程上执行,行成一个执行栈. 2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记. 3)主线程完成所有 ...
- JS异步之宏队列与微队列
1. 原理图 2. 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队:用来保存待执行的宏任务(回调),比如:定时器回调.DOM 事件回调.ajax 回调 微列队:用来保存待 ...
- js中的数组对象排序(方法sort()详细介绍)
定义和用法 sort() 方法用于对数组的元素进行排序. 语法 arrayObject.sort(sortby) 参数sortby:可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意 ...
- Java中UIManager的几种外观的详细讲解
Java'中的几种Look and Feel 1.Metal风格 (默认) String lookAndFeel = "javax.swing.plaf.metal.MetalLookAnd ...
- linux 中解压与压缩 常用操作详细讲解
平时有时候 会在服务器进行一些文件的操作,比如安装一些服务与软件等等,都有解压操作,一般在 导出一些简单的服务器文件,也是先压缩后再导出,因此,在这里根据平时用到解压与压缩命令的频率来记录下: 1.最 ...
- JS的var和let的区别（详细讲解）
let是ES6新增的,它主要是弥补var的缺陷,你也可以把let看做var的升级版.下面我就来详细讲讲var和let的区别 相同点: var和let都有函数级作用域 不同点: (1)var是全局作用域 ...
- jQuery中$(function()与(function($)等的区别详细讲解
(function($) {-})(jQuery); 这里实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参的, ...
- JS中EventLoop、宏任务与微任务的个人理解
为什么要EventLoop? JS 作为浏览器脚本语言,为了避免复杂的同步问题(例如用户操作事件以及操作DOM),这就决定了被设计成单线程语言,而且也将会一直保持是单线程的.而在单线程中若是遇到了耗时 ...
随机推荐
- 云图说｜ROMA演进史：一个ROMA与应用之间不得不说的故事
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 华为云ROMA源 ...
- 顶会CIKM'21论文解读：基于图神经网络的人类行为轨迹恢复模型
摘要:本文是由华为云数据库创新Lab联合电子科技大学数据与智能实验室发表在顶会CIKM'21的文章,该文章提出首个克服人类移动轨迹数据中普遍存在的多层次周期性.周期偏移现象以及数据稀疏问题的轨迹恢复模 ...
- Hive查看，删除分区
查看所有分区 show partitions 表名; 删除一般会有两种方案 1.直接删除hdfs文件 亲测删除hdfs路径后 查看分区还是能看到此分区 可能会引起其他问题 此方法不建议 2. 使用删除 ...
- Solon v2.2.12 发布，Java 应用开发框架
Solon 是一个高效的 Java 应用开发框架:更快.更小.更简单.它不是 Spring.没有使用 Servlet.JavaEE 接口,是一个有自己接口标准的开放生态: 150多个生态插件,可以满足 ...
- Axure 多人协作
创建团队项目 团队 => 从当前文件创建团队项目 签出的文件才能被修改 签出 签入 发布评论 邀请 编辑的5种状态 和SVN差不多的概念 已有项目导入 https://www.bilibili. ...
- Chrome 英文翻译插件，沙拉查词
下载: https://pan.baidu.com/s/1VRaZzKgyPKc0Qt6Gufk3yw 提取码: chbm 下载: https://pan.baidu.com/s/1VRaZzKgyP ...
- termius macos 破解版，激活版下载，永久激活，亲测可用
termius 是一款非常值得推荐的 SSH/SFTP 跨平台终端工具,其十分亮眼的功能是可以上传文件夹,这是其他几款终端工具都不具备的,比如说 macOS 自带的终端.号称 21 世纪最强终端的 w ...
- 创建DOM节点时出现错误信息：box.appendChild is not a function
1.代码正常书写如下 <div class="box"></div> <!-- JavaScript代码 --> <script> ...
- Blazor实现菜单动画
想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它.本人初学,暂时我也不知道原理,先不用组件,自己实现吧.虽然项目中我用了AntDesignBlazor,但是我忘了使 ...
- DS | 折半查找二叉判定树的画法
以下给出我在学习中总结的一种比较简便的 构造折半二叉判定树 的思路以及方法: 思路分析: 在计算 \(mid\) 值时,使用的时 \(mid=(low+high)/2\) .这里由于 \(mid\) ...