宏任务和微任务的应用

最新推荐文章于 2023-10-23 19:11:45 发布
最新推荐文章于 2023-10-23 19:11:45 发布
阅读量944 收藏
点赞数 1
分类专栏： 成长日记 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaohao_123/article/details/123486196
版权

宏任务和微任务我一直以为只存在于面试题中，今天终于让我逮到一个，且看~

APICloud AVM 3.0有个picker的组件，就是滑动选择时间的，这样的

里边有个参数，叫默认选中这列的第几个(比如默认选中今天) 可看这个

它会在父页面加载一开始，就设置选中，比父级周期函数最早的还早。

这就导致--我通过周期函数动态改变默认选中值数据的时候，不行

解决方法是，让该picker组件渲染两次

第一次该失败失败，但是在失败的最后我们通过周期函数把数据添加进去了

第二次，通过setTimeout和v-if，重新执行页面的那一块，由于经过第一次，数据已经添加进去，现在picker里的默认数据就是我刚添加进去的那个

分析：

微任务：picker里边原生的设置默认数据应该是微任务

宏任务：通过setTimeout和v-if执行的是宏任务

微任务执行完执行宏任务~下边是画的流程图

少昊~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
宏任务和微任务
m0_65558076的博客
04-16 2万+
目录 一、宏任务和微任务 先做题： 宏任务： 微任务： 异步和同步的区别: 前端使用异步的场景： 定时任务： 网络请求： 任务队列和event loop（事件循环） 考察的是事件循环和回调队列。注意以下几点： 解析： JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。 为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。Event Loop 包含两类：...
宏任务和微任务的详解，2024年最新Web前端面试点梳理
最新发布
m0_60635637的博客
04-20 1151
前面我们说过，页面的渲染事件、各种 IO 的完成事件、执行 JavaScript 脚本的事件、用户交互的事件等都随时有可能被添加到消息队列中，而且添加事件是由系统操作的，JavaScript 代码不能准确掌控任务要添加到队列中的位置，控制不了任务在消息队列中的位置，所以很难控制开始执行任务的时间。微任务的执行时长会影响到当前宏任务的时长。如果在执行微任务的过程中，产生了新的微任务，同样会将该微任务添加到微任务队列中，V8 引擎一直循环执行微任务队列中的任务，直到队列为空才算执行结束。
宏任务与微任务执行顺序（超详细讲解）
~朴：shu的博客
02-27 6439
写此之前，也查阅了很多文章，并结合自己的理解，说说对Event Loop模型的理解、以及对在任务队列中的影响进行了分析，也给出了多种情形的任务案例以及分析解释，相信大家看完会有所收获；当然，也是自己的理解，难免有所偏差，欢迎大家指正~
宏任务与微任务
Rain022111的博客
03-20 487
JavaScript运行机制：JavaScript是单线程的，它运行的环境般为浏览器或者Node，单线程同一个时间只能做一件事，在JavaScript运行的时候，主线程会形成一个栈（调用栈/执行栈），这个存储函数调用的栈结构遵循先进后出的原则。
JavaScript事件循环及宏任务微任务原理解析
10-14
同步任务是按顺序执行的，而异步任务分为宏任务（MacroTask）和微任务（MicroTask）。 宏任务主要包括：整个脚本、setTimeout、setInterval等。这些任务会在主线程空闲时从任务队列中取出执行。值得注意的是，...
js代码-微任务，宏任务
07-16
这主要通过事件循环（Event Loop）来实现，它将任务分为宏任务和微任务两类。 宏任务（Macrotask）通常包括以下类型： 1. `setTimeout` 和 `setInterval` 2. `I/O` 操作，如文件读写、网络请求 3. `UI 渲染` 4. `...
js代码-浏览器宏任务和微任务的触发机制
07-15
了解了宏任务和微任务的执行顺序后，开发者可以更好地设计异步流程，避免阻塞主线程，提高应用程序性能。例如，尽量减少同步操作，多使用Promise来组织异步逻辑，这样可以确保微任务在当前宏任务结束后尽快得到执行...
宏任务与微任务的理解
weixin_47981807的博客
01-15 7956
宏任务与微任务的理解 宏任务一般是：包括整体代码script、settimeout、setInterval、i/o、ui render 微任务：promise、object.observe、MutationObserver 两者的区别 宏任务 宏任务所处的队列就是宏任务队列 宏任务队列可以有多个 当宏任务队列中的任务全部执行完以后就会查看是否有微任务队列 如果有就先执行微任务队列中的所有任务，如果没有就查看是否有宏任务队列 微任务 微任务所处的队列就是微任务队列 只有一个微任务队列 在上一个宏任.
宏任务与微任务的区别
qq_44734358的博客
02-18 3093
宏任务包括：setTimeout setInterval Ajax DOM事件，宏任务是由宿主（浏览器、Node）发起的，宏任务，可以理解为每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）.进程的切换肯定是宏任务，因为需要花费大量的资源微任务包括：Promise async/await 等…微任务是由JS引擎发起的，微任务,可以理解是在当前 task 执行结束后立即执行的任务。也就是说，在当前task任务后，下一个task之前，在渲染之前。
js异步之宏任务（marcroTask）和微任务（microTask）
热门推荐
田兴的博客
10-06 1万+
先看一到面试题 写出console.log的输出顺序 console.log(100); setTimeout(()=>{ console.log(200); }) setTimeout(()=>{ console.log(201); }) Promise.resolve().then(()=>{ console.log(300); }) console.log(400); // 100 400 300 200 201 // 为什么300比200
JS宏任务和微任务
m0_73481765的博客
10-23 1649
微任务会优先于下一个宏任务执行，即在当前宏任务执行完毕前，所有微任务都会被执行完毕。需要注意的是，当一个宏任务执行过程中产生新的微任务，这些微任务会在当前宏任务执行完之后立即执行。嵌套关系：在一个宏任务中产生的新的微任务，将会在当前宏任务执行完成后立即执行。而新的宏任务则需要等待当前宏任务执行完毕后才会执行。执行时机：宏任务是在主线程空闲时执行的，而微任务是在当前任务执行结束后立即执行的。执行顺序：宏任务按照先进先出的顺序执行，而微任务则会在下一个宏任务执行前优先执行。
宏任务 && 微任务 && async && await（图解）
mister、奎
07-15 6076
1.宏任务和微任务 宏任务和微任务是等待任务队列中的异步任务的处理机制；(JS执行有同步任务队列和等待任务队列) 浏览器的任务队列： 主任务队列存储的都是同步任务； 等待任务队列存储的都是异步任务； 首先浏览器会把主任务队列中的同步任务挨个全部执行完，然后再去等待任务队列中看哪个任务可以执行了，然后把该执行的任务放到主任务队列中去执行，等这个任务执行完，再去等待任务中看谁可以执行了，再把...
宏任务微任务应用举例
qq_44606064的博客
04-10 344
宏任务微任务应用举例
浏览器宏任务微任务图示
小扣柴扉久
11-04 210
前端宏任务和微任务详解
xyphf的博客
02-03 2642
宏任务(macro-task) 定义消息队列中的任务称为宏任务。产生 宿主环境提供的方法是宏任务，例如setTimeout, setInterval。这些都是浏览器或者Node环境实现的。 执行 不断从消息队列中取出并被事件循环执行。 类型 浏览器 Node I/O 宏任务 宏任务 setTimeout 宏任务 宏任务 setInterval 宏任务 宏任务 requestAnimationFrame 宏任务 ...
JavaScript中的宏任务和微任务
大笨儿钟的博客
03-12 1463
先来个例子 如果能很快知道执行的顺序结果，那么说明你对这块的内容理解非常深刻。 <div class="parent" data-spm="2.2.2.2"> <div class="child">123</div> </div> <script> var parent = document.g
js 为什么要分宏任务和微任务
06-06
JavaScript中的宏任务和微任务是为了控制异步任务的执行顺序和优先级而提出的概念。 宏任务通常包括一些异步任务，如setTimeout，setInterval，I/O操作等。当宏任务被放入执行队列中时，它会等待JavaScript引擎的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值