2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

js中的宏任务和微任务详细讲解

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渲染后的哈

求求你了看官

如果你觉得我写的还不错的话~~
请你给我点个一个推荐或者关注我!!
或者请我买一包辣条谢谢你了~~~
本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:BootStrap中模态框踩坑
» 下一篇:[鸿蒙]鸿蒙开发之组件(一):自定义组件
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段