使用 queueMicrotask 创建微任务!

news2024/12/24 8:30:12

之前我们想尽一切办法来创建一个自定义的微任务,如 Promise.thenMutationObserver(浏览器环境中的 API,用于监视 DOM 变动)、async/awaitprocess.nextTick(仅Node.js支持,本质来说它不是事件循环的一部分)。

在偶然的情况下,我发现浏览器竟然具有专门产生微任务的方法!

2023-09-23-13-48-54

它就是原生的 queueMicrotask 方法,该方法存在于 window 对象中,并且目前兼容性还不错:

2023-09-23-13-50-31

queueMicrotask 用法很简单,传入一个想要被包装成微任务的函数即可,看下面的例子:

console.log('1');
queueMicrotask(() => {
  console.log('2');
  Promise.resolve().then(() => {
    console.log('3');
  });
  setTimeout(() => {
    console.log('4');
    queueMicrotask(() => {
      console.log('5');
    });
  });
});
setTimeout(() => {
  Promise.resolve().then(() => {
    console.log('6');
  });
  console.log('7');
  queueMicrotask(() => {
    console.log('8');
  });
});
console.log('9');

打印结果: 1 9 2 3 7 6 8 4 5

相对来说,queueMicrotask 是产生微任务最方便的方法了,希望还没实现的浏览器厂商抓紧时间跟进!

网上搜了一下,发现早在18年 queueMicrotask 提案就得到了通过,19年就有哥们介绍了该 API,我竟然现在才知道,实属汗颜。

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

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

相关文章

8+单基因+细胞凋亡+WGCNA+单细胞+实验验证

今天给同学们分享一篇单基因细胞凋亡WGCNA实验验证的生信文章“RASGRP2 is a potential immune-related biomarker and regulates mitochondrial-dependent apoptosis in lung adenocarcinoma”,这篇文章于2023年2月3日发表在Front Immunol期刊上,影响因…

JDK21新特性

JDK 21 于 2023 年 9 月 19 日正式发布。Oracle 提供GPL 下的生产就绪二进制文件;其他供应商的二进制文件也将很快推出。 Spring Boot 3.x 版本最低支持的 JDK 版本为 JDK 17,也就是说如果你还想用 JDK8的话,那能用的最高 Spring Boot 版本为…

按文件名称轻松管理文件!让文件管理更加高效!

文件管理是日常工作和生活中必不可少的一环,然而,面对众多的文件,如何快速找到所需文件,是一个具有挑战性的任务。现在,我们为您提供一种智能归类的解决方案,让您能够按文件名称轻松管理文件,让…

基于springboot+vue的高校专业实习管理系统

博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

如何利用Arcgis进行地统计学分析(二):探索性数据分析

地统计学的相关介绍及概念参考上篇博客: 如何利用Arcgis进行地统计学分析(一):地统计学分析概念及其分析流程_小咖~的博客-CSDN博客 探索性数据分析是为了让用户更深入地认识研究对象,从而对与其数据相关的问题做出更…

java:算法题(持续更新)

第一题:特征值计算 案例:定义一个int型的一维数组,包含10个元素,分别赋一些随机整数,然后求出所有元素的最大值,最小值,总和,平均值,并输出出来。要求:所有随…

【刷题篇】回溯算法(深度优先搜索(一))

文章目录 无重复字符串的排列组合员工的重要性图像渲染被围绕的区域 无重复字符串的排列组合 无重复字符串的排列组合。编写一种方法&#xff0c;计算某字符串的所有排列组合&#xff0c;字符串每个字符均不相同。 class Solution { public:void DFS(string &s,vector<s…

手撸列表数据内嵌动态th甘特图

需求如图&#xff1a;日期为后端返回的七天日期&#xff0c;这七天组成由甘特图内嵌展示。 解决思路&#xff1a;这个vue项目中el-table自带样式过多&#xff0c;且不方便动态渲染数据&#xff0c;所以用div模拟了&#xff0c;这里甘特图精度为半天所以用v-if判断了&#xff0…

echarts三柱图叠加三柱图解法

需求如图所示。 解决思路1&#xff1a;实际展示柱体魏三叠加柱的和&#xff0c;那么把每个和计算出来作为一个柱的数组&#xff08;此柱实际展示&#xff09;&#xff0c;为了tootip方便自定义取数据且不用每个都查询原始数据&#xff0c;做叠加柱为一般、严重、危急&#xff…

FastChat 大模型部署推理;Baichuan2-13B-Chat测试、chatglm2-6b测试

参考&#xff1a; https://github.com/lm-sys/FastChat https://blog.csdn.net/qq128252/article/details/132759107 ##安装 pip3 install "fschat[model_worker,webui]"1、chatglm2-6b测试 python3 -m fastchat.serve.cli --model-path ./chatglm2-6b --num-gpus …

【JVM内存区域及创建对象的过程】

文章目录 JVM内存区域及创建对象的过程JVM内存区域JDK1.6、1.7、1.8内存区域的变化&#xff1f;创建对象的过程类的声明周期&#xff1a; JVM内存区域及创建对象的过程 JVM内存区域 JVM 内存区域最粗略的划分可以分为 堆 和栈&#xff0c;当然&#xff0c;按照虚拟机规范&…

Vue页面快速使用阿里巴巴矢量图标库

前面我已经写个一篇文章 阿里巴巴矢量图标如何使用_turbo夏日漱石的博客-CSDN博客 这篇文章非常详细地讲解了在html页面中如何使用阿里巴巴矢量图标库 下面我们讲解在vue页面中引入阿里巴巴矢量图标库icon的几种方法 目录 一、引入在线链接 1、 第九步链接引入在vue中应该是在…

python小程序 图书馆图书借阅借还管理系统 mbc21

为设计一个安全便捷&#xff0c;并且使借阅者更好获取本图书借还信息&#xff0c;本文主要有安全、简洁为理念&#xff0c;实现借阅者快捷寻找图书借还信息&#xff0c;从而解决图书借还信息复杂难辨的问题。该系统以django架构技术为基础&#xff0c;采用python语言和MySQL数据…

科学数据分析和图形绘制软件GraphPad Prism 9 mac中文版特点介绍

Prism 9 mac是一款专业的科学数据分析和图形绘制软件&#xff0c;可用于在生物、医学、化学等领域进行数据分析、绘制图形、进行统计分析等。 Prism 9 mac软件特点 1. 多种数据分析功能&#xff1a;Prism 9提供了多种常见的数据分析工具&#xff0c;包括线性回归、ANOVA、t检验…

如何利用物联网技术打造新型智能餐饮连锁店

中国是美食大国&#xff0c;餐饮美食的消费需求庞大&#xff0c;随着餐饮产业的标准化、规模化发展&#xff0c;餐饮店的连锁化率在持续上升&#xff0c;许多餐饮知名品牌都开设了成百上千家连锁店。随着餐饮连锁店数量的增加&#xff0c;对品牌店铺的管理和运营难度也日益增长…

flowable可使用元素介绍

1. 事件 Events 事件描述图标空启动事件空启动事件未指定触发器&#xff0c;由用户调用的启动事件。定时启动事件定时启动事件在指定时间内创建一次或多次的流程实例。消息启动事件消息启动事件使用具名消息启动流程实例。消息名用于定位指定的启动事件。一个流程定义不得包含…

差值结构的顺序偏好

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由5张二值化的图片组成&#xff0c;让A 中有5个点&#xff0c;B中有1个点&#xff0c;且不重合&#xff0c;统计迭代次数并排序。 第一种情况 差值结构 迭代次数 L E - - 2 10491.…

Qt QCustomPlot介绍

介绍 主要介绍qcustomplot及其用法 最新版本:QCustomPlot Patch Release 2.1.1//November 6, 2022 下载:https://www.qcustomplot.com/index.php/download 官网:https://www.qcustomplot.com/index.php 简单使用 mainwindow.h /**************************************…

gateway之整合sentinel流控降级

文章目录 什么是流控降级为什么要流控降级流控降级带来的好处 gateway如何整合sentinel代码示例 总结 什么是流控降级 流控降级是一种在高并发场景下保护系统可用性的策略&#xff0c;它通过对系统的流量进行控制和管理&#xff0c;以防止系统资源耗尽和崩溃。当系统面临压力过…

【c#-Nuget 包“在此源中不可用”】 Nuget package “Not available in this source“

标题c#-Nuget 包“在此源中不可用”…但 VS 仍然知道它吗&#xff1f; (c# - Nuget package “Not available in this source”… but VS still knows about it?) 背景&#xff1a; 今日从公司svn 上拉取很久很久以前的代码&#xff0c;拉取下来200报错&#xff0c;进一步发…