HTMLElement.click()的回调触发踩坑

先看看以下代码

const el = document.getElementById("btn")
el.addEventListener("click", () => {Promise.resolve().then(() => console.log("microtask 1"));console.log("1");
});
el.addEventListener("click", () => {Promise.resolve().then(() => console.log("microtask 2"));console.log("2");
});

点击按钮后,分别进入两个回调,进入第一个回调时,先加到微任务,然后打印 1。
每个宏任务之间会先清空所有微任务,因此打印顺序是 1- 》 microtask1- 》 2-》 microtask2。

那如果按钮点击不是用户触发,而是代码触发呢?

const el = document.getElementById("btn")
el.addEventListener("click", () => {Promise.resolve().then(() => console.log("microtask 1"));console.log("1");
});
el.addEventListener("click", () => {Promise.resolve().then(() => console.log("microtask 2"));console.log("2");
});
el.click()

按理说输出应该一样才对,但输出竟然变了!
在这里插入图片描述
是 click 这个函数有什么特别吗?
问了下 gpt,说是 click 会立即把回调同步执行的,那就符合预期了。
在这里插入图片描述

在这里插入图片描述

而当按钮是用户点击触发时,回调就分为多个宏任务触发了。
在这里插入图片描述

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

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

相关文章

Spring Boot 手写starter!!!

原因:为什么要手写starter??? 原因:简化功能。 实例:以分页为例:写一个starter。 1.首先定义一个PageX注解。 Target({ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented p…

mac/windows git ssh 配置多平台账号(入门篇)

目录 引子多账号多平台配置git一、.ssh文件夹路径1.1 mac 系统1.2 windows 系统 二、生成new ssh2.1 mac系统2.2 windows 系统 三、配置 config四、验证五、用ssh方式拉取远程仓库代码 引子 push代码到github仓库时,提示报错。 Push failed Remote: Support for pa…

Channel

在Java中,Channel是一个用于IO操作(特别是NIO,即非阻塞IO)的接口,它提供了一种连接到IO服务(如文件系统或套接字)的开放连接。Channel是Java NIO中的核心组件之一,使得能够以更接近操…

Redis部署方式(一)四种部署方式介绍

redis的四种部署方式: Redis单机模式部署、Redis主从模式部署、Redis哨兵模式部署、Cluster集群模式部署,后面三种(主从模式,Sentinel哨兵模式,Cluster模式)也可以统称为集群模式。 一、单机 1、缺点&…

XFF伪造 [MRCTF2020]PYWebsite1

打开题目 直接查看源码 看到一个./flag.php 访问一下 购买者的ip已经被记录,本地可以看到flag,那么使用xff或者client-ip伪造一下ip试试 bp抓包 加一个X-Forwarded-For头 得到flag

目标检测新SOTA:YOLOv9问世,新架构让传统卷积重焕生机(附代码)

在目标检测领域,YOLOv9 实现了一代更比一代强,利用新架构和方法让传统卷积在参数利用率方面胜过了深度卷积。 继 2023 年 1 月 YOLOv8 正式发布一年多以后,YOLOv9 终于来了! 我们知道,YOLO 是一种基于图像全局信息进行预测的目标检测系统。自 2015 年 Joseph Redmon、Al…

T-Dongle-S3开发笔记——分区表

参考: ESP32之 ESP-IDF 教学(十三)—— 分区表_esp32分区表-CSDN博客 分区表 - ESP32 - — ESP-IDF 编程指南 latest 文档 (espressif.com) 分区表是 ESP32 划分内部 flash 闪存的清单,它将 flash 划分为多个不同功能的区域用于…

提取淘宝店铺联系方式的爬虫工具

随着电子商务的快速发展,淘宝成为了许多人购物的首选平台。而对于一些商家来说,获取淘宝店铺的联系方式是非常重要的,以便建立更加直接和有效的沟通渠道。本文将介绍一种基于Python的爬虫工具,可以帮助我们提取淘宝店铺的联系方式…

QT问题 打开Qt Creator发现没有菜单栏

之前不知道按了什么快捷键,当我再次打开Qt Creator时发现菜单栏消失啦 找了许多原因发现:安装有道词典的快捷键Ctrl Alt m 与Qt Creator里的快捷键冲突导致菜单栏被莫名其妙的隐藏 解决方法: 1找到有道词典快捷键 2再次按快捷键 Ctrl Alt m就可以重新显示菜单栏

【Pytorch】从MoCo看无监督对比学习;从SupCon看有监督对比学习

目录 无监督对比学习:Moco文章内容理解代码解释 有监督对比学习:Supervised Contrastive Learning文章内容理解 无监督对比学习:Moco 文章内容理解 以下内容全部来自于:自监督学习-MoCo-论文笔记. 侵删 论文:Momentu…

超平面介绍

超平面公式 (1) 超平面是指n维线性空间中维度为n-1的子空间。它可以把线性空间分割成不相交的两部分。比如二维空间中,一条直线是一维的,它把平面分成了两部分;三维空间中,一个平面是二维的,它把空间分成了两部分。(2…

性能优化——canvas 加载海量图

背景 公司的在线设计稿平台的画板列表页开发时由于数据量不足,未能测出关于画板列表页性能问题,在经过用户一段时间的使用后出现了关于初始化卡顿、缩放卡顿等问题,画板列表页采用了vue-konva 原因 关于画板列表为何卡顿有如下几点原因 1、…

如何用jmeter请求application/octet-stream,image/jpeg

用postman调用时: 用jmeter: 注意上图不要勾选,不然会把所有的内容都以二进制传进去,我们不勾选只传二进制的图片内容,勾选了会把MIME类型、参数名称都转为二进制传进去。会报错。

华为配置WLAN AC和AP之间VPN穿越示例

配置WLAN AC和AP之间VPN穿越示例 组网图形 图1 配置WLAN AC和AP之间VPN穿越示例组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 企业用户接入WLAN网络,以满足移动办公的最基本需求。且在覆盖区域内移动发生漫游时,不影响…

Idea依赖爆红解决

Idea依赖爆红问题,确认依赖信息没问题,并且试了网上很多方法都无效的情况下,不妨更换maven的版本试一下,可能会有奇效。

七、矩阵的初等变换

目录 -1. 介绍 0、增广矩阵: 1、初等变换的性质: ​编辑2、矩阵初等变换的分类: 2.1 普通的行阶梯矩阵: 2.2 、行最简形矩阵: 2.3、标准形矩阵: 3、初等变换的定理: 4、初等变换的应用&…

SpringBoot:自定义starter

点击查看:LearnSpringBoot08starter 点击查看:LearnSpringBoot08starterTest 点击查看更多的SpringBoot教程 一、主要流程 1. 先创建空的project 2. 打开空的project 结构 图选中model 点击 3. 创建 model(Maven)启动器 提…

(九)springmvc+mybatis+dubbo+zookeeper分布式架构 整合 - maven构建ant-framework核心代码Base封装

今天重点讲解的是ant-framework核心代码Base封装过程。 因为涉及到springmvc、mybatis的集成,为了使项目编码更简洁易用,这边将基础的BASE进行封装,其中包括:BaseBean、BaseDao、BaseService、CRUD的基础封装、分页组件的封装、m…

SpringBoot之WebSocket服务搭建

SpringBoot之WebSocket服务搭建 文章目录 SpringBoot之WebSocket服务搭建1.创建SpringBoot工程2. pom.xml中引入依赖3. application.yml配置4. 主启动类5. 编写MyWebSocket服务类6. 编写测试页面 WebSockets 彻底改变了 Web,将笨拙、缓慢的实时交互转变为时尚、低延…

传统推荐算法库使用--mahout初体验

文章目录 前言环境准备调用混合总结 前言 郑重声明:本博文做法仅限毕设糊弄老师使用,不建议生产环境使用!!! 老项目缝缝补补又是三年,本来是打算直接重写写个社区然后给毕设使用的。但是怎么说呢&#xff…