欢迎光临
我的个人博客网站

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 

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

我的结论

先同步后异步,先微后宏 微任务的执行时机比宏任务早哈~ 

说说下面代码的执行时机

<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中的宏任务和微任务详细讲解

求求你了看官

如果你觉得我写的还不错的话~~ 请你给我点个一个推荐或者关注我!! 或者请我买一包辣条谢谢你了~~~ 
赞(0) 打赏
未经允许不得转载:张拓的天空 » js中的宏任务和微任务详细讲解
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏