微任务宏任务详解题目

最新推荐文章于 2023-11-14 13:37:17 发布
最新推荐文章于 2023-11-14 13:37:17 发布
阅读量185 收藏
点赞数 1
分类专栏： es6 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52563729/article/details/130213022
版权

在这里插入图片描述
注意点：我们的异步任务1和异步任务2并不是直接放在任务队列里面，而是先挂载到我们相应的线程下面！！！

假如说我们的宏任务执行得很快，100ms就执行完了，那么我们就会去轮询我们的任务队列，但是异步任务1到1s才会被加入到任务队列中！！！所有会空轮询900ms！！！！对于异步任务2会在2s后才会挂载到任务队列中！！！

结论：我们说延迟1s但是可能并不会仅仅只有1s延迟，而是1s后挂在到队列中！！如果宏任务执行了10s。那么就会在1s的时候挂载到任务队列中，然后再等9s后再执行

执行完同步任务过（js主线程的任务）后：我们会先去清空微任务队列再去清空同步任务！！！！

在这里插入图片描述

队列循环！！！！先同后异，先微后宏

在这里插入图片描述
问题：要是微任务和宏任务嵌套怎么办？？？

我们来看这个题的输出：

在这里插入图片描述
D A C F H B G E
我们先遇到了D，，然后遇到了E,将E添加到宏任务，然后遇到了A，promise遇到await之前都是宏任务！并且await这句代码也是宏任务，只有await下面的代码才是微任务，这个时候我们就会输出C，接着是F，然后遇到了then，将then里面的代码添加到微任务队列中，最后遇到了H，这个时候我们的宏任务队列有E,微任务队列有B，G，我们先去清空我们的微任务队列，再去清空宏任务队列！！！

一个奇怪的题

在这里插入图片描述
这段代码当我们点击浏览器中的button的时候我们输出的是L1 M1 L2 M2，因为我们的上面的那个事件和下面的那个事件没有关联，相当于两段script，分别触发！！

但是！！

在这里插入图片描述
如果我们通过.click来调用这个代码，那么就会是L1 L2 M1 M2!!!不会分开调用！！！

pqxpq
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
promise&微任务宏任务问题整理
shenjing_Shining的博客
07-08 512
1. 问：for循环里面有1000次循环，前500次每次都是把data赋值为1，后500次每次都是把data赋值为2，问：dom一共渲染了几次？ 答：DOM一次都没有渲染，因为for循环是一个js执行的持续过程。js和DOM渲染是共享一个线程，js执行时DOM不会渲染。 2. 声明一个promise的时候，是同步函数。如： new Promise((resolve, reject) => { console.log('aaa') // 这一步是同步函数，可直接执行 ...
JS的一道宏任务微任务题目
最新发布
weixin_52268321的博客
12-12 429
左边和右边的代码，分别重新渲染了几次rCount(忽略页面第一次初始化渲染)
一道经典的宏任务和微任务题目（javascript）
慢慢爬的虫的博客
03-16 370
前端笔试题，输出结果顺序
前端面试题——js的宏任务和微任务（包含Demo）
qq_43715797的博客
08-29 449
从上至下执行。
【面试题】宏任务和微任务
zx1041561837的博客
12-13 3542
本文介绍了什么是宏任务，什么是微任务，以及宏任务、微任务和DOM渲染之间的关系，并从event loop的角度解释了宏任务和微任务执行次序的原理。
js笔试题集锦
weixin_50543490的博客
12-08 329
js笔试题集锦
JS异步宏队列与微队列原理区别详解
10-15
JavaScript中的异步处理机制是基于事件循环模型的，其中涉及到两个关键的概念：宏任务（Macro Task）和微任务（Micro Task）。这两个概念是理解JavaScript异步执行的核心。 1. **宏任务**： - 宏任务是那些在事件...
javascript中的event loop事件循环详解
12-02
异步任务分为两种主要类型：宏任务（Macrotask）和微任务（Microtask）。 宏任务包括：`script`（整体代码），`setTimeout`，`setInterval`，`I/O`，`UI渲染`等。它们会被放入宏任务队列中，按照先进先出（FIFO）的...
c语言实验以及题目详细解析
11-16
《C语言实验与题目详细...通过这些基本操作，C语言程序员可以实现各种复杂的数据处理和文件管理任务。在哈工大（威海）的软件工程课程中，这些实验题目和解析将帮助学生深入理解文件操作，并提升他们的程序设计能力。
IT嘉年华知识竞赛题目
12-05
以下是这些题目中涉及的知识点详解： 1. 冯·诺依曼的主要贡献是提出了存储程序概念，这是现代计算机的基础之一，使得程序能够像数据一样存储在内存中。 2. 最先实现存储程序的计算机是EDSAC，它是继ENIAC之后的...
javaScript基础面试题 ---宏任务微任务
weixin_43850639的博客
03-06 622
JS是单线程语言，先执行同步任务，再执行事件循环，事件循环里面包括微任务、宏任务。微任务执行了完了之后，才执行宏任务。微任务：Promise.then。宏任务：setTimeout
微任务宏任务题目
notbaldness的博客
06-30 96
【代码】微任务宏任务题目。
宏任务微任务笔试题示例(console.log输出顺序)
qq_42750608的博客
11-14 193
宏任务微任务笔试题示例(console.log输出顺序)
前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务
weixin_60297362的博客
03-05 1691
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录一、事件循环二、宏任务/微任务无渲染有渲染 一、事件循环 我们都知道，Js引擎是单线程的，也就是说每次执行一堆程序，必须是一个执行完再去执行另一个。那可能有人要问了：平时我们开启setTimeout定时器，也没见影响到后面程序的运行啊！是因为javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。而它的非阻塞性是通过异步任务来实现的，可见setTimeout就是一个异步任务。 那么从上图我们就可以得知：实现异步任务，就
宏任务和微任务JS执行顺序题目+总结
小管管的博客
01-06 812
宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。一个宏任务执行完才会去执行另外一个宏任务async函数返回值是promise对象宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。一个宏任务执行完才会去执行另外一个宏任务async函数返回值是promise对象，await后面的代码是异步微任务。
前端面试题——JS高级
GAN、Transformer、Vue、Django知识学习&&分享者 ZhuBa的博客 zhuba-Ahhh.github.io
10-13 1027
前端面试题——JS高级 顺序：宏任务-微任务-渲染（如果需要渲染，比如到了时间，或有更改dom），而不是再次执行宏任务。命名函数只能在函数自身内部使用，在外使用会报错。
JS事件循环机制——宏任务&微任务常考输出题
just a moment
03-01 405
答案在最后，持续更新。 事件循环执行顺序为： 先执行宏任务script，并执行里面的同步任务；执行栈为空后查询是否存在微任务，存在就立即执行，然后开始下一轮的事件循环。 一 setTimeout(function () { console.log(1); }); new Promise(function(resolve,reject){ console.log(2) resolve(3) }).then(function(val){ consol..
宏任务/微任务分析题
我欲乘风破浪
04-13 466
async function foo() { console.log('foo'); } async function bar() { console.log('bar start'); await foo(); console.log('bar end'); } console.log('script start'); setTimeout(function () { con...
js中的微任务和宏任务，附面试题
weixin_45932460的博客
01-12 1866
因为javascript是一门单线程语言，所以代码的解析执行都要以自上而下的执行，直到任务队列（task queue）的出现，js开始有了异步任务，当一段代码需要稍后执行时，便可以使用异步方案（setTimeout、setInterval、Poromis、Axios、Dom事件）来使指定操作添加到异步任务中。
"Azkaban任务类型详解：command和java类型及示例
Azkaban是一个用于任务调度和工作流管理的开源平台，支持多种任务类型，包括command和java。在azkaban-3.51.0版本中，主要介绍了这两种任务类型的详细使用以及示例。 首先，azkaban支持的任务类型包括command、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值