脚本宝典收集整理的这篇文章主要介绍了JavaScript中的宏任务和微任务详情,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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渲染后的哈
到此这篇关于JavaScript
中的宏任务和微任务详情的文章就介绍到这了,更多相关JavaScript
中的宏任务和微任务内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的JavaScript中的宏任务和微任务详情全部内容,希望文章能够帮你解决JavaScript中的宏任务和微任务详情所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。