用户页面触发点击事件和 js 执行点击事件的区别

文章目录

    • 情景展示
      • 情况一:用户点击页面触发
      • 情况二:通过 js 触发点击
    • 结果分析
      • 情况一
      • 情况二

其实这个谜底揭开之后,第一反应都是,哦~,非常简单,但是细节决定成败,我被这个细节毁掉了,所以仅以此篇记录我这次的“折戟沉沙”

情景展示

情况一:用户点击页面触发

btn.addEventListener('click', () => {Promise.resolve().then(() => {console.log('microtask-1')})console.log('点击了1')
})btn.addEventListener('click', () => {Promise.resolve().then(() => {console.log('microtask-2')})console.log('点击了2')
})

输出如图:

QQ202458-113949-HD-ezgif.com-video-to-gif-converter

情况二:通过 js 触发点击

btn.addEventListener('click', () => {Promise.resolve().then(() => {console.log('microtask-1')})console.log('点击了1')
})btn.addEventListener('click', () => {Promise.resolve().then(() => {console.log('microtask-2')})console.log('点击了2')
})btn.click()

输出结果如图:

image-20240508114239236

结果分析

情况一

两者不一致的原因其实也简单,用户点击触发的时候,并不在执行栈中发生具体的代码执行,仅仅是发送了一个点击事件而已,所以在第一个侦听器触发时,会打印点击1,然后将 microtask-1 加入微队列,图解如下:

image-20240508120140351

此时由于执行栈为空,那么就会立即取出微队列的任务进行执行,即输出microtask-1,第二个侦听器同理,打印点击了2,然后直接取出微任务执行,打印 microtask-2

情况二

通过 js 触发的点击事件,首先会在栈中加入一个 btn.click 的任务,执行侦听器1打印点击了1之后,就会把macrotask-1加入微队列,此时执行栈是存在任务的,所以不会直接取出微队列执行。

继续执行侦听器2,打印点击了2之后,将macrotask-2加入微队列,此时点击事件执行完成,执行栈就是空的,所以会直接取出微队列里面的任务执行,依次打印 macrotask-1、macrotask-2,图解如下:

image-20240508122255780

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

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

相关文章

【十大排序算法】----选择排序(详细图解分析+实现,小白一看就会)

目录 一:选择排序——原理 二:选择排序——分析 三:选择排序——实现 四:选择排序——优化 五:选择排序——效率 一:选择排序——原理 选择排序的原理:通过遍历数组,选出该数组…

精酿啤酒:精酿文化的传承者与创新者

在啤酒的世界中,精酿啤酒是一种与众不同的文化现象。这种文化源于对啤酒品质的追求和对传统工艺的尊重,但在不断发展中也不断涌现出创新。作为精酿啤酒的品牌,Fendi club啤酒不仅是这种文化的传承者,更是创新者。 Fendi club啤酒始…

香港电讯高效网络,助力新消费品牌抓住拓展香港市场新风口

自今年初香港与内地全面恢复通关,两地同胞跨境消费热潮持续升温。港人“北上”消费掀起风潮的同时,香港市场也成为内地新消费品牌拓展的热门目标。从糕点、茶饮、连锁餐饮到服饰,越来越多内地品牌进驻香港。新消费品牌要想在香港开设门店&…

QT部分学习笔记

文章目录 1.前言注意问题2.学习历程2.0 创建项目 快捷键:2.1 创建按钮2.2 对象树2.3 调试输出2.4 QT坐标系2.5 信号和槽 3.Qmainwindow3.1 窗口菜单栏创建3.2 工具栏3.3 状态栏3.4 铆接部件3.5 对话框 4. 1.前言 版本: 5.9.9 注意问题 Qstring类型通多…

算法课程笔记——蓝桥云课第11次直播

算法课程笔记——蓝桥云课第11次直播

ORA-28575: unable to open RPC connection to external procedure agent

环境: Oracle 11.2.0.4x64 RAC AIX6.1版本SDE for aix oracle11g版本10.0 x64 sde配置情况如下: 检查oracle和grid用户下的$ORACLE_HOME/hs/admin/extproc.ora文件均包含有如下: SET EXTPROC_DLLSANY 两个节点sde下的user_libraries都正常…

leetcode.环形链表问题

目录 题目1 示例 解题思路 代码实现 补充 题目2 示例 解题思路 代码实现 题目1 该题链接:https://leetcode.cn/problems/linked-list-cycle/description/ 示例 解题思路 要创建两个指针一个是快指针(fast),另一个慢指针(slow)。快指针走两步慢指…

【Android】Apk图标的提取、相同目录下相同包名提取的不同图标apk但是提取结果相同的bug解决

一般安卓提取apk图标我们有两种常用方法: 1、如果已经获取到 ApplicationInfo 对象(假设名为 appInfo),那么我们获取方法为: appInfo.loadIcon(packageManager)// 返回一个 Drawable 对象2、 如果还没获取到 Applica…

必背!!2024年软考中级——网络工程师考前冲刺几页纸

距离软考考试的时间越来越近了,趁着这两周赶紧准备起来 今天给大家整理了——软考网络工程师考前冲刺几页纸,都是核心重点,有PDF版,可打印下来,每天背一点。 计算机总线分类 ①总线的分类:数据总线、地址总…

内网渗透瑞士军刀-impacket工具解析(二)

impacket工具解析之Kerberos认证协议 上一期我们介绍了impacket中ntlm协议的实现,在Windows认证中除了使用ntlm认证,还支持Kerberos认证协议,Kerberos认证也是Windows 活动目录中占比最高的认证方式。 什么是Kerberos协议? Kerb…

CSRF 攻击实验:更改请求方式绕过验证

前言 CSRF(Cross-Site Request Forgery),也称为XSRF,是一种安全漏洞,攻击者通过欺骗用户在受信任网站上执行非自愿的操作,以实现未经授权的请求。 CSRF攻击利用了网站对用户提交的请求缺乏充分验证和防范…

英语学习笔记10——Look at ...

Look at … 看…… 词汇 Vocabulary fat adj. 胖的,丰富的 n. 脂肪 例句:他是个胖男孩。    He is a fat boy. 搭配:fat cat 有钱人,土豪 woman n. 女人 girl n. 女孩 madam n. 女士 man n. 男人 boy n. 男孩 sir n. 先生 …

jdk安装多个版本,但是java -version显示最早安装的版本,换掉Path或者JAVA_HOME不生效问题

问题一:当你的电脑上又多个jdk版本,如17 或者8时,使用命令行 java -version显示最早安装的,如下图所示:环境变量配置的17,但是命令行显示的是8。 原因:windows电脑装jdk17后 会在你的环境变量…

声纹识别在无人机探测上的应用

无人机在民用和军事领域的应用越来越广泛。然而,随着无人机数量的增加,"黑飞"现象也日益严重,对公共安全和隐私构成了威胁。因此,开发有效的无人机探测与识别技术变得尤为重要。及时发现黑飞无人机的存在进而对其型号进…

Springboot+Vue项目-基于Java+MySQL的民族婚纱预定系统(附源码+演示视频+LW)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &…

在浏览器执行js脚本的两种方式

fetch请求get 在浏览器执行http请求,可以使用fetch函数; fetch(“url”).then(response => response.text()) .then(data => console.log(JSON.parse(data)[‘status’])) .catch(error => console.error(error)) 直接返回json数据: fetch(“url”).then(response…

【Java】/*数组的定义与使用*/

目录 一、数组的定义 1.1 为什么要使用数组 1.2 什么是数组 1.3 数组的初始化 1.3.1 动态初始化 1.3.2 静态初始化 1.2.3 注意事项 三、遍历数组 3.1 用循环的方式遍历数组 3.2 用 for each 的方式遍历数组 3.3 用 Arrays.toString 的方式遍历数组 3.4 一些其他的…

【3dmax笔记】028:倒角的使用方法

一、倒角描述 在3dmax中创建倒角效果可以通过多种方法实现,以下是几种常见的方法: 使用倒角修改器。首先创建一个图形(如矩形和圆),然后对齐它们,将它们转化为可编辑样条线,并附加在一起,选择要倒角的边缘,然后使用倒角修改器来调整高度、轮廓等参数。使用倒角剖面修…

【稳定检索|投稿优惠】2024年医学、药学与生物工程国际会议(ICMPB 2024)

2024年医学、药学与生物工程国际会议(ICMPB 2024) 2024 International Conference on Medicine, Pharmacy, and Biotechnology 【会议简介】 2024年医学、药学与生物工程国际会议将于长沙召开。此次会议将汇聚全球医学、药学与生物工程领域的顶尖学者…

MIT 6.5840(6.824) Lab2:Key/Value Server 设计实现

1 实验要求 在本次 Lab 中,你将在单机上构建一个键/值服务器,以确保即使网络出现故障,每个操作也只能执行一次,并且操作是可线性化的。 客户端可以向键/值服务器发送三个不同的 RPC: Put(key, value) 、 Append(key,…