当前位置: 首页 > news >正文

前端 JS 经典:宏任务、微任务、事件循环(EventLoop)

1. 前言概览

js 是一门单线程的非阻塞的脚本语言

单线程:只有一个主线程处理所有任务

非阻塞:有异步任务,主线程挂起这个任务,等异步返回结果再根据一定规则执行

 2. 宏任务与微任务

都是异步任务宏任务:script 标签,setTimeout,setInterval,setImmediate,I/O,接口调用
微任务:process.nextTick,Promise.then() catch(),Async/Await,Object.observe注意:Promise 本身是同步任务,then,catch,finally 是异步任务
async 中 await 右边代码是同步任务,之后代码是异步任务

3. 事件循环

主线程执行顺序:一个宏任务(script 标签)-> 同步任务 -> 微任务 -> 一个宏任务 -> 宏任务中的微任务(如果有) -> 下一个宏任务 -> ..... 直到 js 事件执行完成。

4. 经典案例

async function async1(){console.log('1') // 同2await async2()console.log('2') // 微1
}
async function async2(){console.log('3') // 同3
}
console.log('4') // 同1
setTimeout(function(){console.log('5') // 宏1
},0)
setTimeout(function(){console.log('6') // 宏2
},3)
async1();
new Promise(function(resolve){console.log('7') // 同4resolve();console.log('8') // 同5
}).then(function(){console.log('9') // 微2
})
console.log('10') // 同6
// 输出:4,1,3,7,8,10,2,9,5,6

相关文章:

前端 JS 经典:宏任务、微任务、事件循环(EventLoop)

1. 前言概览 js 是一门单线程的非阻塞的脚本语言 单线程:只有一个主线程处理所有任务 非阻塞:有异步任务,主线程挂起这个任务,等异步返回结果再根据一定规则执行 2. 宏任务与微任务 都是异步任务宏任务:script 标签&a…...

电子邮件发送接收原理(附 go 语言实现发送邮件)

前言 首先要了解电子邮件的发送接收,不是点到点的。我想给你传达个消息,不是直接我跑到你家里喊你:“嘿,xxx,是你的益达,快拿走”。 而是类似快递的发送收取方式,是有服务器的中转的。我先将我…...

体系结构评估——(三)风险承担者

风险承担者分为系统生产者、系统消费者、系统服务人员和其他四大类。 其中系统生产者有:软件系统架构师、开发人员、维护人员、集成人员、测试人员、标准专家、 性能工程师、安全专家、项目经理、产品线经理。 系统消费者有:客户、最终用户、应用开发…...

【HarmonyOS】元服务卡片展示动态数据,并定点更新卡片数据

【关键字】 元服务卡片、卡片展示动态数据、更新卡片数据 【写在前面】 本篇文章主要介绍开发元服务卡片时,如何实现卡片中动态显示数据功能,并实现定时数据刷新。本篇文章通过实现定时刷新卡片中日期数据为例,讲述展示动态数据与更新数据功…...

SaveFileDialog.OverwritePrompt

SaveFileDialog.OverwritePrompt 获取或设置一个值,该值指示如果用户指定的文件名已存在,Save As 对话框是否显示警告。 public bool OverwritePrompt { get; set; } OverwritePrompt 控制在将要在改写现在文件时是否提示用户 https://vimsky.com/…...

oracle统计信息

1. 查看表的统计信息 1.建表 SQL> create table test as select * from dba_objects;2.查看表的统计信息 select owner, table_name, num_rows, blocks, avg_row_lenfrom dba_tableswhere owner SCOTTand table_name TEST; OWNER TABLE_NAME NUM_ROWS BLO…...

LeetCode 面试题 16.01. 交换数字

文章目录 一、题目二、C# 题解 一、题目 编写一个函数&#xff0c;不用临时变量&#xff0c;直接交换 numbers [a, b] 中 a 与 b 的值。 示例&#xff1a; 输入: numbers [1,2] 输出: [2,1] 提示&#xff1a; numbers.length 2-2147483647 < numbers[i] < 214748364…...

手机apn介绍

公司遇到一件很棘手的事情&#xff0c;app发版之后&#xff0c;长江以北地方的用户网络信号很好&#xff0c;但是打开app之后网络连接不上&#xff0c;而长江以南的用户网络却很好。大家找了很多资料&#xff0c;提出一些方案&#xff1a; 1、是不是运营商把我们公司的ip给限制…...

垃圾回收系统小程序

在当今社会&#xff0c;废品回收不仅有利于环境保护&#xff0c;也有利于资源的再利用。随着互联网技术的发展&#xff0c;个人废品回收也可以通过小程序来实现。本文将介绍如何使用乔拓云网制作个人废品回收小程序。 1. 找一个合适的第三方制作平台/工具&#xff0c;比如乔拓云…...

【随机过程】布朗运动

这里写目录标题 Brownian motion Brownian motion The brownian motion 1D and brownian motion 2D functions, written with the cumsum command and without for loops, are used to generate a one-dimensional and two-dimensional Brownian motion, respectively. 使用cu…...

基于机器视觉的车道线检测 计算机竞赛

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…...

C语言文件读写,文件相关操作

文章目录 C语言文件读写&#xff0c;文件相关操作1.C语言万物皆是地址&#xff0c;文件读操作2.文件的写3.文件的复制4.获取文件的大小5.文件的加密解密 C语言文件读写&#xff0c;文件相关操作 1.C语言万物皆是地址&#xff0c;文件读操作 // // Created by MagicBook on 20…...

竞赛选题 深度学习卷积神经网络的花卉识别

文章目录 0 前言1 项目背景2 花卉识别的基本原理3 算法实现3.1 预处理3.2 特征提取和选择3.3 分类器设计和决策3.4 卷积神经网络基本原理 4 算法实现4.1 花卉图像数据4.2 模块组成 5 项目执行结果6 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基…...

CMake教程 - basic point

CMake教程 - basic point 1 - Building a Basic Project 最基本的CMake项目是由单个源代码文件构建的可执行文件。对于像这样简单的项目&#xff0c;只需要一个带有三个命令的CMakeLists.txt文件。 注意&#xff1a;尽管CMake支持大写、小写和混合大小写命令&#xff0c;但小…...

day52--动态规划11

想死&#xff0c;但感觉死的另有其人&#xff0c;&#xff0c;怎么还在动态规划&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; 123.买卖股票的最佳时机III 188.买卖股票的最佳时机IV 第一题&#xff1a;买卖股票的最佳时机III 给定一个数组&#xff0c;它…...

Jenkins入门级安装部署

前言 Jenkins是一个开源软件项目&#xff0c;是基于Java开发的一种持续集成工具&#xff0c;用于监控持续重复的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行持续集成。通常&#xff0c;项目中常用Jenkins作为编译打包项目的工具&#xff0…...

tcpdump 异常错误

tcpdump 进行抓包的时候&#xff0c;-w 提示 Permission denied&#xff1a; sudo tcpdump -w test1.log tcpdump: test1.log: Permission denied 开始以为是用户权限的问题&#xff0c;后来换用 root 账户还是不行&#xff0c;经搜索&#xff0c;是 AppArmor 的问题。 解决方…...

如何绘制【逻辑回归】中threshold参数的学习曲线

threshold参数的意义是通过筛选掉低于threshold的参数&#xff0c;来对逻辑回归的特征进行降维。 首先导入相应的模块&#xff1a; from sklearn.linear_model import LogisticRegression as LR from sklearn.datasets import load_breast_cancer from sklearn.model_selecti…...

4.1 数据库安全性概述

思维导图&#xff1a; 前言&#xff1a; - **第一章回顾**&#xff1a;数据库特点 - 统一的数据保护功能&#xff0c;确保数据安全、可靠、正确有效。 - 数据保护主要涵盖&#xff1a; 1. **数据的安全性**&#xff08;本章焦点&#xff09; 2. 数据的完整性&#xff08;第…...

tftp服务的搭建

TFTP服务的搭建 1 先更新一下apt包 sudo apt-get update2 服务器端(虚拟机上)安装 TFTP相关软件 sudo apt-get install xinetd tftp tftpd -y3 创建TFTP共享目录 mkdir tftp_sharetftp_shaer的路径是/home/cwz/tftp_share 3.1 修改共享目录的权限 sudo chmod -R 777 tftp…...

别再用asyncio硬扛高并发了!无GIL环境下Python原生多线程性能翻倍的6个核心调优参数

第一章&#xff1a;Python无锁GIL环境下的并发模型演进全景Python长期以来受全局解释器锁&#xff08;GIL&#xff09;制约&#xff0c;导致多线程无法真正并行执行CPU密集型任务。近年来&#xff0c;随着CPython 3.12正式引入实验性“无GIL构建选项”&#xff08;--without-py…...

AutoGen Studio效果展示:看Qwen3-4B如何协作完成网页设计

AutoGen Studio效果展示&#xff1a;看Qwen3-4B如何协作完成网页设计 1. AutoGen Studio简介 AutoGen Studio是一个基于微软AutoGen框架开发的低代码界面工具&#xff0c;它让构建和组合AI代理变得简单直观。通过这个平台&#xff0c;你可以快速创建多个AI代理&#xff0c;为…...

超级障碍马术联赛(PJL)正式启动,设立创纪录的3亿美元保底奖金池,开启障碍马术运动新纪元

• PJL助力骑手以全职职业运动员身份参赛&#xff0c;同时为这项运动构建可持续的经济模式。 • PJL由McCourt Global支持&#xff0c;核心管理团队拥有数十年马术赛事、体育和娱乐行业经验&#xff0c;为顶级障碍马术赛事树立全新、可持续且具备全球影响力的标准。 • 2027年3…...

新手必看:Neeshck-Z-lmage_LYX_v2界面状态管理,让你的设置不再丢失

新手必看&#xff1a;Neeshck-Z-lmage_LYX_v2界面状态管理&#xff0c;让你的设置不再丢失 1. 工具简介&#xff1a;为什么需要状态管理&#xff1f; 当你第一次打开Neeshck-Z-lmage_LYX_v2这个绘画工具时&#xff0c;可能会被它简洁的界面所吸引。但真正让它与众不同的&…...

XBeeATCmds库:Arduino嵌入式AT命令封装实践

1. XBeeATCmds 库概述&#xff1a;面向嵌入式开发者的 AT 命令封装实践XBeeATCmds 是一个专为 Arduino 平台设计的轻量级 C 封装库&#xff0c;其核心目标是将 Digi XBee 系列模块&#xff08;包括 Series 1、Series 2/2B、Series 3 及兼容 Zigbee、802.15.4、DigiMesh 协议的模…...

TransCAD新手必看:如何用表格链接快速创建矩阵OD并生成期望线(附详细步骤图)

TransCAD实战指南&#xff1a;从表格链接到期望线可视化的全流程解析 引言 在交通规划与空间分析领域&#xff0c;TransCAD作为一款专业的GIS软件&#xff0c;其强大的数据处理和可视化能力一直备受推崇。对于初学者而言&#xff0c;掌握表格链接创建矩阵OD并生成期望线的技巧&…...

KingbaseES V008R006C008B0014物理备份实战:sys_rman从配置到自动化的完整避坑指南

KingbaseES物理备份实战&#xff1a;从sys_rman配置到自动化运维的深度解析 凌晨三点&#xff0c;数据库告警铃声突然响起——某核心业务系统的KingbaseES实例因磁盘故障导致数据丢失。此时&#xff0c;一个配置得当的sys_rman物理备份系统将成为最后的救命稻草。不同于简单的操…...

洛谷-入门5-字符串3

P1553 数字反转&#xff08;升级版&#xff09;题目背景以下为原题面&#xff0c;仅供参考:给定一个数&#xff0c;请将该数各个位上数字反转得到一个新数。这次与 NOIp2011 普及组第一题不同的是&#xff1a;这个数可以是小数&#xff0c;分数&#xff0c;百分数&#xff0c;整…...

Claude Code性能优化实战:如何让AI编程助手在大型项目中飞起来

Claude Code性能优化实战&#xff1a;如何让AI编程助手在大型项目中飞起来 大型代码库就像一座迷宫&#xff0c;而Claude Code则是你手中的智能地图。但当项目规模膨胀到数十万行代码时&#xff0c;这张地图的加载速度可能会让你抓狂。本文将分享一系列经过实战验证的性能优化技…...

G-Helper终极指南:释放华硕笔记本全部潜力的轻量级控制工具

G-Helper终极指南&#xff1a;释放华硕笔记本全部潜力的轻量级控制工具 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Stri…...