js事件循环机制

1、为什么会有事件循环机制?

JavaScript是一种单线程的语言,这意味着它一次只能执行一个任务。然后,Web应用通常需要处理多个任务,比如用户输入,网络请求,渲染页面等。如果所有的任务都按照同步的方式执行,可能会导致阻塞页面,用户体验不佳。

为了解决这个问题,javascript引入了事件循环机制。事件循环是一种机制,用于管理和调度不同来源的任务执行。这个机制运行jsvascript在执行一部操作时不会阻塞整个应用程序的执行。

2、事件循环的关键组成部分

  1. 执行栈(Execution Stack): JavaScript 引擎使用执行栈来管理代码的执行。当调用函数时,会将该函数推入执行栈,并在执行完毕后从栈中弹出。
  2. 任务队列(Task Queue): 在事件循环中,除了执行栈外,还存在任务队列。当发生异步事件(如定时器结束、事件触发等)时,会将对应的回调函数放入任务队列中。
  3. 事件循环(Event Loop): JavaScript 引擎在执行栈为空时,会不断地从任务队列中取出任务,推入执行栈中执行。这个过程不断重复,形成了事件循环。

这个机制允许 JavaScript 在执行异步任务时,通过将回调函数放入任务队列中,在执行栈为空时再去执行这些任务,从而实现异步执行而不会阻塞整个程序。

3、事件循环执行步骤

  1. 先执行所有的同步任务:会有序依次向下执行的例如console,条件判断语句,循环语句等等。
  2. 执行异步任务里的微任务队列将解析到的微任务依次添加到微任务队列的后排,在执行时按顺序依次执行,先进先执行先出去例如Process.$nextTick,promise实例的then方法,await关键字
  3. 执行异步任务里的宏任务队列宏任务队列的执行是没有顺序之分的,哪个任务先调用完成就执行哪个任务(比如有一个5秒的定时器先加入进来的,但是有后加入进来一个2秒的定时器,那么2秒的定时器先调用完成,就先执行,所以是无序的),事件处理函数,定时器(setTimeout, setInterval),ajax请求,script标签

4、例子

//1、同步任务,会立即执行,马上输出
console.log("script start");// 2、异步任务-》宏任务,推入宏任务队列中[事件2], 执行完全部同步任务和微任务队列后,才会执行
setTimeout(function() {console.log("setTimeout---0");
}, 0);// 3、异步任务-》宏任务,推入宏任务队列中[事件2、事件3],执行完全部同步任务和微任务队列后,才会执行
setTimeout(function() {// 31、同步任务,会立即执行,马上输出console.log("setTimeout---200");// 32、异步任务-》宏任务,推入宏任务队列中[事件32],执行完全部同步任务和微任务队列后,才会执行setTimeout(function() {console.log("inner-setTimeout---0");});// 33、异步任务-》微任务,推入微任务队列中[事件33],执行完全部同步任务后,才会执行Promise.resolve().then(function() {console.log("promise5");});
}, 200);// 4、异步任务-》微任务,推入微任务队列中[事件4],执行完全部同步任务后,才会执行
Promise.resolve().then(function() {console.log("promise1");}).then(function() {console.log("promise2");});// 5、异步任务-》微任务,推入微任务队列中[事件4、事件5],执行完全部同步任务后,才会执行
Promise.resolve().then(function() {console.log("promise3");
});// 6、同步任务,会立即执行,马上输出
console.log("script end");// 执行完所有同步任务后,会输出 : 'script start' -> 'script end'
// 接着执行异步任务的微任务队列[事件4、事件5](按顺序执行):会输出:'promise1' -> 'promise2' -> 'promise3'
// 接着执行异步任务的宏任务队列[事件2、事件3](无顺序执行,谁执行的快,就输入哪个),会输出:'setTimeout---0' -> 'setTimeout---200' -> 'promise5' -> 'inner-setTimeout---0'// 结果
'script start'
'script end'
'promise1'
'promise2'
'promise3'
'setTimeout---0'
'setTimeout----200'
'promise5'
'inner-setTImeout0----0'

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android BT HCI分析简介

对于蓝牙开发者来说,通过HCI log可以帮助我们更好地分析问题,理解蓝牙协议,就好像网络开发一定要会使用Wireshark分析网络协议一样。 本篇主要介绍HCI log的作用、如何抓取一份HCI log,并结合一个实际的例子来说明如何分析HCI log…

亚马逊云科技 re:Invent 2023:科技前沿风向标,探索未来云计算之窗

文章目录 一、前言二、什么是亚马逊云科技 re:Invent?三、亚马逊云科技 re:Invent 2023 将于何时何地举行四、亚马逊云科技 re:Invent 2023 有什么内容?4.1 亚马逊云科技 re:Invent 2023 主题演讲4.2 亚马逊云科技行业专家探实战 五、更多亚马逊云科技活…

单片机----汇编语言入门知识点

目录 汇编语句的格式 汇编语句的两个基本语句 子程序的调用 查表程序设计 1.x和y均为单字节数的查表程序设计 2.x为单字节数y为双字节数的查表程序设计 3.x和y均为双字节数的查表程序设计 分支转移程序设计 1.单分支选择结构 2.多分支选择结构 循环程序设计 (1) 计…

华为1+x网络系统建设与运维(中级)-练习题2

一.设备命令 LSW1 [Huawei]sys LSW1 同理可得,给所有设备改名 二.VLAN LSW1 [LSW1]vlan ba 10 20 [LSW1]int g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type trunk [LSW1-GigabitEthernet0/0/1]port trunk allow-pass vlan 10 20 [LSW1-GigabitEthernet0/0/1]in…

根目录/ 空间不够,扩容,导致web页面无法加载问题

现象就是:搭建的web页面无反应,也没报错,怀疑是内存空间不够导致的。/ 扩容步骤如下: 虚拟机为关机状态添加虚拟磁盘 #查看磁盘,并创建新分区 fdisk -l fdisk /dev/sdb p       查看已分区数量(我看…

2312skia,14示例及一些介绍

pdf示例. SkDocument和SkCanvasAPI用Skia的PDF后端(SkPDF)的示例,[这里](https://fiddle.skia.org/c/PDF docs/examples/PDF.cpp). SkPDF限制 Skia的公共API有几个角落是SkPDF目前无法处理的,因为或没有已知的客户使用该功能,或没有简单的PDF式方法来处理它. 本文档中: 1,…

SQL Server 数据库,为products表添加数据

在插入数据的时候,需要注意以下事项。 > 每次插入一整行数据,不可能只插入半行或几列数据。 > 数据值的数目必须与列数相同,每个数据值的数据类型、精度和小数位数也必须与相应的 列匹配。 > INSERT语句不能为标识列指定值&#…

触控板绘画工具Inklet mac功能介绍

Inklet mac是一款触控板绘画工具,把你的触控板变成画画的板子,意思是,你点在触控板的哪里,鼠标就会出现载相应的地方。例如,但你把手指移动到触控盘左下角,那么鼠标也会出现在左下角,对于用户而…

虽有局限性,但在Windows 11上运行Android应用程序是一个不错的新功能

在Windows 11上,Android的Windows子系统(WSA)是一个集成,允许你在笔记本电脑或台式机上与Windows应用程序一起运行Android应用程序,在本指南中,我将向你展示入门步骤。官方规定,你只能从亚马逊应用商店安装应用程序,但也可以使用安卓调试桥(ADB)工具侧载安卓应用程序…

CAPL语言 自动化测试

CAPL语言 自动化测试 CAPL(CAN Access Programming Language)是一种专为CAN(Controller Area Network)网络开发的编程语言。这种语言主要用于汽车行业,尤其是在自动化测试和网络通信方面。以下是关于其在自动化测试中…

VSCode主题自定义

记录vscode主题配置 {"editor.minimap.enabled": true,"files.autoSave": "afterDelay","security.workspace.trust.untrustedFiles": "open","markdown-preview-enhanced.previewTheme": "atom-light.css&…

SQL-分页查询offset的用法

今天在做一道关于查询一张表中第二高工资的问题时发现没有思路,经过一番搜索发现需要用到offset偏移量来解决这个问题。 OFFSET关键字用于指定从结果集的哪一行开始返回数据。通常,它与LIMIT一起使用,以实现分页效果。其语法如下&#xff1a…

【mysql】mysgld.log文件太大怎么办

我们有一台测试服务器。跑着一个msyq,发现没有空间了。差看日志文件占用了很多。 怎么破 使用下面命令 echo "" >mysqld.log 执行命令后

Spring Boot统一异常处理 Spring拦截器

小编在前文中向大家描述了Spring AOP的相关内容:Spring AOP-CSDN博客感兴趣的各位老铁可查看一下!! 那么,我们本文主要是代理搭建来实现一个Spring Boot统一功能处理模块了,当然,这个也是Spring AOP的实战环…

Vue3获取阴历/农历日期

安装插件 pnpm add chinese-lunar-calendar引入阳历/阴历切换函数 import {getLunar} from chinese-lunar-calendarexport function lunarDate(pDate){const year pDate.getFullYear()const month pDate.getMonth() 1const day pDate.getDate()const result getLunar(yea…

以热爱的态度对待生活,就是最自己的温柔

粉色系拼接款羽绒服 90白鸭绒+连帽立领设计 防风又保暖,柔软蓬松舒适感十足 衣服上加了时尚的字母印花元素 袖口做了魔术贴设计 下摆也做了可调节抽绳 防风保暖五部做到实处哦 宽松版型,很耐穿保暖性又很强 简单大方,搭配…

隐形内嵌!触想智能发布全新B款内嵌式工控一体机及内嵌式工业显示器

近日,触想智能发布全新B款内嵌式工控系列TPC-19.该系列可支持显示器和一体机等多种品类、多级配置的灵活选购。标志性的2.5mm矮阶窄边面板设计,适配隐形内嵌式安装,专为机柜类设备应用打造,以高契合的物理结构,带动稳定…

mysql在linux环境下安装(rpm)以及初始化后的登录配置

注:该安装步骤转载于CSDN,下方配置为原创 按照图片安装并初始化完成MySQL等操作后进行; 安装对于rpm包集合 1-查看安装情况(有4个路径) whereis mysql 2-查看服务状态 systemctl status mysql 3-初始化数据库 mysqld --initial…

企业真题(数组\面向对象-基础)

二、企业真题 1. 数组有没有length()这个方法? String有没有length()这个方法?(*蓝) 数组没有length(),是length属性。 String有length() 2. 有数组int[] arr,用Java代码将数组元素顺序颠倒(闪*购&…

FISCO-BCOS 在ARM系统架构搭建节点(国密版)

问题: 使用 fisco-bcos v2.9.1 搭建一个节点,批量上链1000条数据,在上链200条-400条数据之间节点会出现异常,导致后面数据不能上链。 系统环境 操作系统:统信 查看系统构架 ld -version rootuos-PC:/# ld -version …