当前位置: 首页 > news >正文

分析实例,学习了解浏览器事件循环机制

实例

 (() => {console.log(1);setTimeout(() => {console.log(2);}, 0);new Promise((resolve, reject) => {resolve()console.log(3);}).then(() => {console.log(4);});console.log(5);})();

执行上述箭头函数得到的答案: 1 3 5 4 2

分析学习:

  1. 代码运行是从上到下执行的;首先输出1
  2. 浏览器的执行机制,promise的机制会早于setTimeout,即使setTimeout的延迟是0s;而 resolve(), console.log(3);是同步调用;那么第2个输出就是3;
  3. promise的知识点,当有resolve()才会继续调then函数的事物,那么已知4要3晚。

---------》那么当前的排序应该是 1 3 4 2

  1. new Promise((resolve, reject) => {
    resolve()
    console.log(3);
    })是和 console.log(5);是同一级别;意思是先指向Promise的同步部分,就会马上执行输出5

最终答案: 1 3 5 4 2

官方解释

浏览器事件循环机制

同步代码 → 直接执行。
微任务(MicroTask):
Promise.then / MutationObserver / queueMicrotask
在当前调用栈清空后立即执行。
宏任务(MacroTask):
setTimeout / setInterval / I/O / UI Rendering
必须等待微任务队列清空后才会执行。
这样设计是为了保证高优先级的任务(如 Promise)能更快执行,而低优先级的任务(如 setTimeout)稍后执行。

http://www.xdnf.cn/news/1018765.html

相关文章:

  • 基于ssm的教学质量评估系统
  • CIM和建筑风貌管控平台
  • [7-01-03].第03节:环境搭建 - 集群架构
  • Java企业技术趋势分析:AI应用的落地实践与未来展望
  • nuxt2报错Unexpected token ‘{‘
  • CSS flex-basis 属性详解:功能、用法与最佳实践
  • CSS Houdini 解锁前端动画的下一个时代!
  • 主流版本控制工具Git vs Perforce P4:架构模式、性能、大文件管理及分支管理对比详解
  • 在线教程丨刷新TTS模型SOTA,OpenAudio S1基于200万小时音频数据训练,深刻理解情感及语音细节
  • 引入 Kafka 消息队列解耦热点操作
  • list使用及模拟
  • HarmonyOS 应用模块化设计 - 面试核心知识点
  • WPF--Application.Current.Dispatcher.BeginInvoke
  • 在Jupyter Notebook中使用Conda虚拟环境
  • 使用 PyMuPDF 和 PySide6/PyQt6 编写的 PDF 查看器 (显示树状书签和缩略图列表,没有文字选择功能)
  • Monte Carlo衍生品定价(金融工程)
  • Spring Boot3流式访问Dify聊天助手接口
  • PHP语法基础篇(二):输出函数与字符串操作
  • 《第五章-心法进阶》 C++修炼生涯笔记(基础篇)指针与结构体⭐⭐⭐⭐⭐
  • 6月计算机新书:深度学习、大模型、DeepSeek
  • Blender 3D建模工具的快捷键总结--选择、视图、对象、编辑、UV贴图、模型材质、动画与渲染、工具
  • 238. 除自身以外数组的乘积
  • Linux运维-ansible-python开发-获取inventroy信息
  • 第二十五章 25.Network Architecture(CCNA)
  • 简析MDM在餐饮设备中的部署与应用
  • 快速掌握Django框架设计思想(图解版)
  • java_oss_微信小程序_通过临时签名url访问oss中存储的图像
  • 微信小程序中跨页面调用函数来刷新页面
  • 深入理解JavaScript设计模式之策略模式
  • @Profile, @Conditional, @ConditionalOnMissingBean, @ConditionalOnClass