JavaScript中的事件循环(Event Loop)

1. 概述

javaScript是单线程的,意味着它一次只能执行一个任务。然而,许多操作,如网络请求、定时器等,都会导致延迟,如果程序在等待这些操作完成时,可能会操作一个阻塞的效果,影响用户体验。这个时候就需要事件循环来进行一个调节:通过合理的安排任务的执行顺序,使得异步任务能够以非阻塞的方式运行。在搞清楚事件循环之前,需要明白javaScript中的任务、任务队列等概念

2. javaScript中的任务

javaScript程序里面的任务可以分为两类

  • 同步任务:没有被引擎挂起、在主线程上排队执行的任务。同步任务是按照代码的书写顺序依次执行的,只有前一个任务执行完毕,才能执行下一个任务,因此会阻塞后续的任务执行。在事件循环中,同步任务的执行会一致持续,直到所有的同步任务执行完毕
  • 异步任务:被引擎挂起、放在一边,不进入主线程,而进入任务队列的任务。异步任务是在将来的某个时间点执行的任务,不会阻塞后续任务的执行,异步任务通常会在一段时间后完成,并在完成时触发回调函数处理结果。 异步任务又可以分为两个子类,宏任务、微任务
    • 宏任务:代表一个独立的、完整的执行单元,在任务队列中排队等待执行。典型的宏任务包括,整体的javaScript代码、setTimeOutsetTimeIntervalAjax
    • 微任务:微任务是一个更小的任务单位,它的执行优先级高于宏任务。当一个宏任务执行完毕后,在执行下一个宏任务之前,会立即处理微任务队列中的所有微任务。典型的微任务包括,promisedefinePropertyProxy

3. 任务队列和事件循环

javaScript运行时,除了一个正在运行的主线程,引擎还提供了一个任务队列(task queue),里面是各种需要当前程序处理的异步任务。实际上根据异步任务的类型,存在多个任务队列,如之前所说的,宏任务队列,微任务队列。

  • 任务队列:是一种数据结构,用于存储不同类型的任务,如宏任务和微任务。任务会别添加到任务队列,等待事件循环将其取出并执行
    • 宏任务队列:存储宏任务,每次事件循环迭代中只执行一个宏任务
    • 微任务队列:存储微任务,这些微任务在宏任务执行完毕之后立即执行

引擎在执行所编写的代码顺序是:

  1. 主线程会去执行所有的同步任务。等到同步任务执行完毕之后,就会检查任务队列里面的异步任务
  2. 这里首先会从宏任务队列里面选择一个宏任务执行,执行完毕之后,则检查微任务队列并以此执行里面所有的微任务
  3. 当微任务队列中的任务执行完毕之后,重复步骤2,直到宏任务队列为空

在每次事件循环迭代中,同步任务的执行都是第一步,只有当所有的同步任务执行完毕之后,事件循环机制才会去检查任务队列,并从宏任务队列中选择一个宏任务执行,在执行宏任务的过程中如果产生了微任务,会将这些微任务添加到微任务队列,并等当前的宏任务执行完毕之后立即执行微任务队列里面的微任务。等微任务队列中的微任务执行完毕之后,则会选着宏任务队列中的下一个宏任务执行,依次循环

在这里插入图片描述

事件循环:上诉执行顺序中的2->3->2->3...就可以称为事件循环(Event Loop), 事件循环是 JavaScript 异步编程的基础机制,通过合理地管理任务队列、宏任务和微任务,使得异步操作能够在单线程环境中得到有效的协调和执行,从而提高了程序的响应性和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/1621062.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

《C语言编程环境搭建》工欲善其事 必先利其器

C语言编译器 GCC 系列 GNU编译器套装(英语:GNU Compiler Collection,缩写为GCC),指一套编程语言编译器,常被认为是跨平台编译器的事实标准。原名是:GNU C语言编译器(GNU C Compiler)。 MinGW 又称mingw32 &#xff0c…

MDK 5.xx.0 + STM32F10x 笔记

天才脑袋比不上烂笔头, 写给自己看, 自用资料。 安装MDK STM32环境 Download MDK安装 MDK -> c:\keil_v5 用默认路径下载 ARMCC V5.06 Update 7 (build960) <- 长期稳定支持版本安装至 c:\keil_v5\arm\ARMCC开启 uVision.设定 预设编译程序版本 : V5.06 Update 7 (bui…

Sloare flare网卡信息

详细的安装信息 https://github.com/Xilinx-CNS/onload/tree/master/scripts 进行下载 Solarflare网卡开发:openonload 安装与调试_openonload安装_Erice_s的博客-CSDN博客 cns-sfnettest测试 cns-sfnettest 下载

战斗场景之英雄的AI

*我代码风格有点不好&#xff0c;能公有坚决不私有&#xff0c;但是这个不好&#xff0c;因为这个被老大训了好几次呢&#xff0c;后来看到朋友们看我的代码都一副蒙的样子&#xff0c;我还是改了&#xff0c; 下面的代码我还没改&#xff0c;因为是自己随手做的小东西&#x…

2023年最新版IDEA安装(超详细)

个人主页&#xff1a;平行线也会相交 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 平行线也会相交 原创 收录于专栏【JavaSE_primary】 写在前面&#xff0c;IDEA的安装是建立在JDK安装好了的前提下&#xff0c;否则IDEA是无法使用的&#xff0c;具体JDK…

【Unity】【UI Shader】关于用Shader实现字体的描边和阴影

前言 描边和阴影&#xff0c;Unity本来是由自带的组件的&#xff08;Outline和Shadow&#xff09;。Unity自己的实现方式如下&#xff1a; Outline&#xff1a;把原文字/图片以往的网格复制4份&#xff0c;然后上下左右各偏移一点距离&#xff08;相当于多绘制了4遍&#xff…

【Android】MyTool 工具界面:手电筒

文章目录 MyTool 工具界面&#xff1a;♦ 回顾♦ 设置 activity_my_tool.xml 界面♦ 编写 MyToolActivity 实现功能界面跳转♦ 创建 activity_flash_light.xml 手电筒界面♦ 编写 FlashLightActivity 实现功能♦ 修改AndroidManifest.xml文件授权♦ 测试 MyTool 工具界面&#…

定时器中断学习和简单应用

定时器中断&简单应用 定时器中断基本介绍清楚明白工作原理定时器结构 主要内容两个寄存器初始化程序 简单应用-秒表基本功能代码详解 彩蛋&#xff1a;对于独立按键的使用没啥硬核内容&#xff0c;就是初学者萌新入门&#xff0c;学长大佬请移步 定时器中断 基本介绍 清…

自学HarmonyOS应用开发(62)- 使用对象关系映射数据库保存设定信息

除了地图数据&#xff0c;秒表应用还有一些其他希望保存的数据&#xff0c;例如上次定位的位置&#xff0c;地图画面的缩放比例等。本文介绍通过对象关系映射数据库技术保存这些信息的方法。 通用的设定信息表 下面的代码定义了用于保存设定信息的通用的表结构&#xff1a; E…

Git企业开发控制理论和实操-从入门到深入(七)|企业级开发模型

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总 然后就是博主最近最花时间的一个专栏…

模2运算规则

模2加法 模2加法没有进位&#xff0c;等同于异或运算。一位数的模2加法规则如下&#xff1a; 0 0 0 0 1 1 1 0 1 1 1 0 多位数的模2加法中&#xff0c;每一位都按照上面的规则进行&#xff0c;例如: 当多个数相加&#xff0c;对应位置上如果有偶数个1&#xff0c;…

知识图谱实战应用25-基于py2neo的超市商品的图谱构建与商品推荐系统的实现

大家好,我是微学AI,今天给大家介绍一下知识图谱实战应用25-基于py2neo的超市商品的图谱构建与商品推荐系统的实现,本篇文章,我将指导大家如何使用py2neo和Neo4j构建一个实用的超市商品知识图谱和推荐系统。该系统可以帮助用户快速找到感兴趣的商品,并提供个性化的推荐服务…

pygame实现物体运动拖尾尾迹

文章目录 前言主要内容讲解&#xff1a;代码 总结更多宝藏 前言 &#x1f60e;&#x1f973;&#x1f60e;&#x1f920;&#x1f916;&#x1f648;&#x1f4ad;&#x1f373;&#x1f371; 本文我们来讲一下如何使用pygame实现一个拖尾特效。 主要内容 &#x1f99e;&am…

pe_xscan 增加 O31 项

O31项 对应的项目&#xff1a; 开机、关机脚本 用户登录、注销脚本

LeetCode第1~5题解

CONTENTS LeetCode 1. 两数之和LeetCode 2. 两数相加LeetCode 3. 无重复字符的最长子串 LeetCode 1. 两数之和 【题目描述】 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出和为目标值 target 的那两个整数&#xff0c;并返回它们的数组下标。…

linux下运行win10效果好不好,Win10不好用?继续坚守Win7的人依然巨多

前不久&#xff0c;微软发布消息称Windows 10操作系统市场占有率终于突破50%。而近日&#xff0c;安全厂商卡巴斯基发布的8月下旬最新研究报告也印证了这一点&#xff0c;并且从数据来看&#xff0c;Windows 10系统的占有率还有小幅度的增长&#xff0c;达到了53%左右。 退休时…

其实win10要比win7的安全性强很多

随着win10系统的一步步更新&#xff0c;用户体验度也越来越好&#xff0c;更多的用户也换了win10的系统&#xff0c;但还是有一部分用户依然雷打不动的信任着win7。下面小编来分析一下win7和win10到底有着怎样的差别&#xff0c;相信看完下文&#xff0c;你也会想升级win10系统…

W7-2495X参数 至强W72495X功耗

W7-2495X采用10纳米工艺二十核心四十线程CPU主频 2.6GHz动态加速频率 4.8GHz 热设计功耗(TDP) 225W支持最大内存容量 2TB内存类型 DDR5 4800MHz W7-2495X性能怎么样这些点很重要 http://www.adiannao.cn/du

电脑装了w10没有w7流畅怎么办?

如果我们对自己的电脑进行了系统的重装&#xff0c;在电脑装了win10系统之后发现没有win7流畅的话&#xff0c;很多小伙伴不知道是什么情况应该怎么解决。 那么据微点阅读小编所知可能是我们电脑硬件设施的不兼容所导致的。我们可以在官网上查看win10系统的配置要求是否符合自…

W7-2475X参数 至强W72475X功耗

W7-2475X采用10纳米制作工艺二十核心四十线程CPU主频 2.6GHz动态加速频率 4.8GHz 热设计功耗(TDP) 225W支持最大内存容量 2TB内存类型 DDR5 4800MHz W7-2475X性能怎么样这些点很重要 http://www.adiannao.cn/du