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

js【详解】event loop(事件循环/事件轮询)

news 来源：原创 2024/5/21 23:59:52

event loop 是异步回调的实现原理

js 代码的执行过程

  • 从前到后，一行一行执行
  • 如果某一行执行报错，则停止下面代码的执行
  • 先把同步代码执行完，再执行异步

event loop 图解

以下方代码为例：

在这里插入图片描述

第1步 将第 1 行代码放入调用栈

将要执行第1行代码放入调用栈（call stack）中

在这里插入图片描述

第2步 执行第 1 行代码，清空调用栈

执行第1行代码，在浏览器中打印 Hi，并清空调用栈
在这里插入图片描述
在这里插入图片描述

第3步 将第 3 行代码放入调用栈

在这里插入图片描述

第4步 执行第 3 行代码，设置定时器，清空调用栈

执行第3行代码，发现是一个定时任务，于是在 Web APIs 中设置一个回调函数为 cb 1 的定时器，清空调用栈
在这里插入图片描述

第5步 将第 7 行代码放入调用栈

在这里插入图片描述

第6步 执行第 7 行代码，清空调用栈，开始事件轮询

执行第7行代码，在浏览器中打印 Bye，并清空调用栈
在这里插入图片描述
此时同步代码已执行完，开始事件轮询（即不断询问回调队列中是否存在可执行代码）
在这里插入图片描述
事件轮询会一直进行，直到整个js代码不再运行（如页面被销毁）。

第7步 将定时器的回调函数放入回调队列

本例中，第3行代码设置的定时器是 5 秒，则从第4步设置定时器开始记时，5秒后，将 Web APIS 中的定时器的回调函数放入回调队列（Callback Queue）中

在这里插入图片描述

第8步 事件轮询将定时器的回调函数放入调用栈

定时器的回调函数放入回调队列的那一刻，就会被事件轮询到（若回调队列已有多个回调函数，则会按先进先出的原则依次放入调用栈），并放入调用栈
在这里插入图片描述

第9步 将第 4 行代码放入调用栈

在这里插入图片描述

第10步 执行第 4 行代码，移除调用栈中的第 4 行代码

执行第4行代码，在浏览器中打印 cb1，将第4行代码从调用栈中移除
在这里插入图片描述
在这里插入图片描述

第11步 清空调用栈，全部代码执行完毕

因回调函数 cb1内的代码已执行完毕，函数cb1 也被移出调用栈

在这里插入图片描述

相关文章：

  • 智能电视（如小米电视）安装应用（当贝市场、浏览器）、去开机广告
  • 数据库讲解（MySQL版）（超详细）【第一章】
  • 应用内存分析
  • STM32 | 零基础 STM32 第一天
  • Dubbo基础入门二
  • 功能测试+自动化测试代码覆盖率统计
  • C#，煎饼排序问题（Pancake Sorting Problem）算法与源代码
  • #QT(串口助手-界面)
  • 多线程环境中使用UdpClient，适当的同步机制
  • php-webdriver 通过队列的方式实现工作流
  • 刷题第11天
  • 985硕的4家大厂实习与校招经历专题分享（part2）
  • 测试常用的Linux命令
  • 中医把脉笔记
  • react tab选项卡吸顶实现
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 345-反转字符串中的元音字母
  • android高仿小视频、应用锁、3种存储库、QQ小红点动画、仿支付宝图表等源码...
  • angular学习第一篇-----环境搭建
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • ESLint简单操作
  • JAVA SE 6 GC调优笔记
  • java正则表式的使用
  • jQuery(一)
  • Js基础——数据类型之Null和Undefined
  • Linux各目录及每个目录的详细介绍
  • Making An Indicator With Pure CSS
  • MySQL Access denied for user 'root'@'localhost' 解决方法
  • PHP CLI应用的调试原理
  • python学习笔记 - ThreadLocal
  • React中的“虫洞”——Context
  • 前端面试总结（at, md）
  • 前端学习笔记之原型——一张图说明`prototype`和`__proto__`的区别
  • 微信开源mars源码分析1—上层samples分析
  • 微信小程序：实现悬浮返回和分享按钮
  • 资深实践篇 | 基于Kubernetes 1.61的Kubernetes Scheduler 调度详解 ...
  • #HarmonyOS：Web组件的使用
  • #ubuntu# #git# repository git config --global --add safe.directory
  • (07)Hive——窗口函数详解
  • （2）MFC+openGL单文档框架glFrame
  • （2）nginx 安装、启停
  • （Note）C++中的继承方式
  • （分布式缓存）Redis持久化
  • （附源码）springboot 房产中介系统 毕业设计 312341
  • （附源码）springboot 校园学生兼职系统 毕业设计 742122
  • (六)库存超卖案例实战——使用mysql分布式锁解决“超卖”问题
  • （论文阅读30/100）Convolutional Pose Machines
  • (图)IntelliTrace Tools 跟踪云端程序
  • （已解决）什么是vue导航守卫
  • （转）大型网站的系统架构
  • (转载)OpenStack Hacker养成指南
  • *p++,*(p++),*++p,(*p)++区别？
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .net6 webapi log4net完整配置使用流程
  • .net打印*三角形