javaScript 进阶之路 --- 《 宏任务和微任务 》(二)

简介: javaScript 进阶之路 --- 《 宏任务和微任务 》

三. 不使用 Promise 创建一个微任务


到这里我们可能会有疑问。我们可以直接像 setTimeout 那样很简单的创建一个宏任务一样创建微任务吗?你别说,还真有它就是挂在 window 对象身上的一个方法----queueMicrotask

image.png

别觉得这个单词这么长就害怕,其实理解起来非常简单。微软公司怎么拼?MicroSoft对吧,那微任务不就是 MicorTask 吗?

image.png

使用方法非常简单,这个函数接受一个回调函数作为参数。和 setTimeout 一模一样的使用方法。

image.png

我们看一下控制台输出结果

image.png

四. 趁热打铁


是不是感觉好像悟了什么?哪我考考你,下面代码的运行结果是?

image.png

其实这个问题的关键点就在于这两个函数谁先执行?

image.png

这里我直接揭晓答案,其实不管是微任务还是宏任务,当队列中有多个任务在排队的时候,都遵循先进先出。就和现实生活排队一样,我先进去队里排队,自然而然我就是要先执行的。上面代码的执行顺序,先把 console.log("2") 放进了微任务队列,而 resolve("3") 是后一个微任务,那么自然在事件循环在主线程执行完回过头看微任务队列的时候,先看到的就是 console.log("2"),那么它就先执行。

所以控制台上正确的显示结果就是

image.png

五. 思考题


我们稍微调整一下上面的代码,我仅仅只改动了一丢丢代码。

image.png

请你回答出上面代码在控制台的输出结果,写在评论区~🎁

如果你能准确回答出,说明后面的手写 Promise 一定不是什么问题~

相关文章
|
4月前
|
JavaScript 前端开发 API
详解队列在前端的应用,深剖JS中的事件循环Eventloop,再了解微任务和宏任务
该文章详细讲解了队列数据结构在前端开发中的应用,并深入探讨了JavaScript的事件循环机制,区分了宏任务和微任务的执行顺序及其对前端性能的影响。
|
3月前
|
JavaScript 前端开发 调度
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
52 0
|
4月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
114 4
|
5月前
|
存储 前端开发 JavaScript
JavaScript 并发任务控制
【8月更文挑战第31天】JavaScript 并发任务控制
64 2
|
5月前
|
运维 JavaScript 安全
自动化运维:使用Ansible简化日常任务深入理解Node.js事件循环和异步编程
【8月更文挑战第27天】在快节奏的技术环境中,自动化不再是奢侈品,而是必需品。本文将引导你通过Ansible实现自动化运维,从基础到高级应用,解锁高效管理服务器群的秘诀,让你的IT操作更加流畅和高效。
|
6月前
|
前端开发 JavaScript 安全
JavaScript进阶-JavaScript库与框架简介
【7月更文挑战第11天】JavaScript库和框架加速Web开发,但也带来挑战。选择适合项目、团队技能的库或框架,如React、Angular、Vue,是关键。保持依赖更新,注意性能优化,避免过度依赖。遵循最佳实践,确保安全性,如防XSS和CSRF。学习基础,结合代码示例(如React计数器组件),提升开发效率和应用质量。
78 1
|
6月前
|
资源调度 JavaScript 前端开发
JavaScript进阶 - JavaScript库与框架简介
【7月更文挑战第5天】JavaScript库和框架构成了前端开发的核心,如jQuery简化DOM操作,Angular、React和Vue提供全面解决方案。选择时要明确需求,避免过度工程化和陡峭学习曲线。使用版本管理工具确保兼容性,持续学习以适应技术变化。示例展示了jQuery和React的简单应用。正确选择和使用这些工具,能提升开发效率并创造优秀Web应用。
64 2
|
6月前
|
JavaScript IDE 持续交付
阿里云云效产品使用合集之如何配置 Node.js构建任务让其在Windows环境中进行
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
6月前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
150 0
|
6月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
123 0