客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
1、微任务有哪些
2、宏任务有哪些
3、案例
<script>
console.log(1)
setTimeout(()=>{
console.log("2")
},0)
Promise.resolve().then(()=>{
console.log('3')
})
console.log(4)
</script>
我们发现打印的顺序是 为什么是这样的顺序？ 先打印1-4这肯定是没有问题的 为啥先打印3然后才是2 因为3是 2是 微任务的执行时机比宏任务早。 所以先执行的是3然后才是2 3.1 结论
4、代码案例
<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>
4.1 代码分析上面这一段代码的执行分析： 肯定是先执行 然后根据先微任务后宏任务 就是输出3然后弹出3 然后就是说输出2然后弹出 因为微任务和宏任务之间还有一个 所以然后是 所以输出 然后才是输出2然后弹出 4.2 结论和运用的场景微任务》DOM渲染》宏任务 看下面的例子 这个结论的运用场景 我们都做过echarts.我们知道渲染echarts的时候。 需要页面的DOM渲染完毕后，才能拿到节点进行渲染。 所以有的小伙伴会请请求的时机放在monuted()这个生命周期中 这样就可以确保返回来的数据肯定能够正常渲染在页面上。 其实根据上面这个结论。 你完全可以在created中去请求数据。返回来的的时候。 DOM肯定渲染完了。因为请求是宏任务。 宏任务的执行时机是在DOM渲染后的哈 到此这篇关于 |
请发表评论