JavaScript中的宏任务和微任务详情

 更新时间:2021年11月23日 13:58:09   作者:咏吟  
这篇文章主要介绍了JavaScript中的宏任务和微任务,下面文章围绕JavaScript宏任务和微任务相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助

1、微任务有哪些

Promise

awaitasync

2、宏任务有哪些

setTimeout

setInterval

  • DOM事件
  • AJAX请求

3、案例

<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

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 代码分析

上面这一段代码的执行分析:

肯定是先执行1-4

然后根据先微任务后宏任务

就是输出3然后弹出3

然后就是说输出2然后弹出setTimeout2 【错误的】

因为微任务和宏任务之间还有一个DOM渲染

所以然后是dom渲染,最后才是宏任务

所以输出1-4后,执行的是DOM渲染。

然后才是输出2然后弹出setTimeout2

4.2 结论和运用的场景

微任务》DOM渲染》宏任务 看下面的例子

这个结论的运用场景

我们都做过echarts.我们知道渲染echarts的时候。

需要页面的DOM渲染完毕后,才能拿到节点进行渲染。

所以有的小伙伴会请请求的时机放在monuted()这个生命周期中

这样就可以确保返回来的数据肯定能够正常渲染在页面上。

其实根据上面这个结论。

你完全可以在created中去请求数据。返回来的的时候。

DOM肯定渲染完了。因为请求是宏任务。

宏任务的执行时机是在DOM渲染后的哈

到此这篇关于JavaScript中的宏任务和微任务详情的文章就介绍到这了,更多相关JavaScript中的宏任务和微任务内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于JavaScript代码实现微信扫一扫下载APP

    基于JavaScript代码实现微信扫一扫下载APP

    有很多人在做微信的扫一扫下载。但是在微信更新之后微信将该功能给禁止掉了,也不能说是全面禁止吧,因为腾讯、微信是一家嘛,通过应用宝审核的应用好像还是可以通过扫一扫直接下载的,下面通过本篇文章给大家介绍微信扫一扫下载app的代码片段,感兴趣的朋友一起看看吧
    2015-12-12
  • 微信小程序 详解Page中data数据操作和函数调用

    微信小程序 详解Page中data数据操作和函数调用

    这篇文章主要介绍了微信小程序 详解Page中data数据操作和函数调用的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 教程之wxapp视图容器 swiper

    微信小程序 教程之wxapp视图容器 swiper

    这篇文章主要介绍了微信小程序 教程之wxapp视图容器 swiper的相关资料,需要的朋友可以参考下
    2016-10-10
  • 漂亮的仿flash菜单,来自蓝色经典

    漂亮的仿flash菜单,来自蓝色经典

    漂亮的仿flash菜单,来自蓝色经典...
    2006-06-06
  • 8个JS的reduce使用实例和reduce操作方式

    8个JS的reduce使用实例和reduce操作方式

    reduce方法是JavaScript中一个比较强大的方法,可能在平时开发中,有人根本没用过,通过下面的8个例子,学会reduce的用法以及它的常用场景,需要的朋友可以参考一下
    2021-09-09
  • 微信小程序页面间通信的5种方式

    微信小程序页面间通信的5种方式

    这篇文章主要介绍了微信小程序页面间通信的5种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 详细探究ES6之Proxy代理

    详细探究ES6之Proxy代理

    ES6中提出了一个新的特性,就是proxy,用来拦截在一个对象上的指定操作,这个功能非常的有用。本文会介绍 Proxy的使用方式及列举具体实例解释 Proxy 的使用场景。
    2016-07-07
  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现

    这篇文章主要介绍了微信小程序 向左滑动删除功能的实现的相关资料,需要的朋友可以参考下
    2017-03-03
  • JS版的date函数(和PHP的date函数一样)

    JS版的date函数(和PHP的date函数一样)

    这篇文章主要介绍了JS版的date函数,使用方法和PHP的date函数一样,需要的朋友可以参考下
    2014-05-05
  • Javascript闭包使用场景原理详细

    Javascript闭包使用场景原理详细

    这篇文章主要介绍了Javascript闭包的使用场景,  由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,闭包就是能够读取其他函数内部变量的函数。所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁,下面一起进入文化在哪个了解文章内容
    2021-11-11

最新评论