当前位置：首页 > article >正文

后盾人JS -- 异步编程，宏任务与微任务

article 2026/4/26 17:55:22

异步加载图片体验JS任务操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function loadImag(src,resolve,reject){let image = new Image()image.src = srcimage.onload = ()=>{resolve(image)}image.onerror = reject}loadImag("images/houdunren.png",(image)=>{document.body.appendChild(image)        //回调方式},()=>{console.log("加载失败")})</script>
</body>
</html>

定时器的任务轮询

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{background-color: greenyellow;width: 200px;height: 200px;position: relative;left: 0;}
</style>
<body><div></div><script>function interval(callback,delay){let id = setInterval(()=>callback(id),delay)}interval(timeId => {const div = document.querySelector("div")let left = parseInt(window.getComputedStyle(div).left)div.style.left = left + 10 + "px"if(left >= 200){clearInterval(timeId)interval(timeId=>{let width = parseInt(window.getComputedStyle(div).width)div.style.width = width - 10 + "px"if(width<=20){clearInterval(timeId)}},100)}},50)console.log("后盾人.com")</script>
</body>
</html>

定时器有任务轮询（因为是异步的），所以肯定是主线程执行完之后才来执行它

通过文件依赖了解任务排序

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function load(src, resolve) {let script = document.createElement("script")script.src = srcscript.onload = resolvedocument.body.appendChild(script)}load("js/hd.js", () => {load("js/houdunren.js", () => {houdunren()})})</script>
</body></html>

这是文件的依赖，学习promise后会让这个更加的简洁

后面就看不懂了

宏任务与微任务

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>setTimeout(()=>{console.log("定时器")},0)Promise.resolve().then(value=>{console.log("Promise")})console.log("后盾人")</script>
</body>
</html>

定时器的任务编排

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>setTimeout(()=>{console.log("定时器 1")},2000)setTimeout(()=>{console.log("定时器 2")},2000)console.log("后盾人")for(let i = 0;i<1000;i++){console.log("")}</script>
</body>
</html>

时间需要少的先执行

DOM渲染任务是放到最后的，JS是后渲染的

进度条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>div{width: 100px;background-color: greenyellow;}
</style>
<body><div id="hd"></div><script>function handle(){let i = 0const hd = document.getElementById('hd');(function run(){hd.innerHTML = ihd.style.width = i + "%"if(++i<=100){setTimeout(run,20)}})()}handle()</script>
</body>
</html>

后盾人JS -- 异步编程，宏任务与微任务

异步加载图片体验JS任务操作 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title&g…...

编程日记 2026/2/21 10:25:30

Go语言的内存分配原理

Go语言的内存分配原理 Go语言的内存管理分为两个主要区域：栈（Stack） 和堆（Heap）。理解这两个区域的工作原理，可以帮助你写出更高效的代码，并避免一些常见的性能问题。 1. 栈（Stac…...

编程日记 2026/2/23 9:25:32

分层解耦-ioc引入

内聚: 软件中各个功能模块内部的功能联系。耦合: 衡量软件中各个层/模块之间的依赖、关联的程度。软件设计原则: 高内聚低耦合。...

编程日记 2026/4/20 0:58:31

【知识科普】CPU,GPN,NPU知识普及

CPU,GPU,NPU CPU、GPU、NPU 详解1. CPU（中央处理器）2. GPU（图形处理器）3. NPU（神经网络处理器） **三者的核心区别****协同工作示例****总结** CPU、GPU、NPU 详解 1. CPU（中央处理器&#xff0…...

编程日记 2026/2/25 20:02:48

【管理与实物】1.1.1 建筑物分类与构成

1.1.1 建筑物分类与构成建筑物的分类建筑物的构成一、课前学习建议民用建筑的分类：根据《民用建筑设计统一标准》GB50352-2019 划分可划分为单层或多层民用建筑、高层民用建筑、超高层民用建筑；根据《建筑设计防火规范》GB50016-2014（2…...

编程日记 2026/3/5 20:27:42

CentOS虚机在线扩容系统盘数据盘

最近在制作Openstack下的镜像，用户需要CentOS6以及CentOS7的虚机镜像，遇到了些关于系统盘以及数据盘在线扩容的问题，故此整理一下。传统我们想对磁盘在线热扩容，必然会想到LVM逻辑卷。如果没有LVM逻辑卷的情况下，…...

编程日记 2025/5/31 16:41:41

使用Kickstart配置文件封装操作系统实现Linux的自动化安装

使用Kickstart配置文件封装操作系统实现Linux的自动化安装创建ks.cfg配置文件可以使用已经安装完成的Linux操作系统中的/root目录下的anaconda.cfg配置文件注意，配置文件会因为kickstart的版本兼容性的问题导致无法安装报错需要在实际使用过程中删除某些参数 …...

编程日记 2026/2/24 13:12:53

如何利用DeepSeek开源模型打造OA系统专属AI助手

利用DeepSeek开源模型打造OA系统专属AI助手，可以显著提升办公效率，增强信息检索和管理能力。注册与登录DeepSeek平台访问DeepSeek官网访问DeepSeek的官方网站DeepSeek。使用电子邮件或手机号码注册账号并登录。获取API Key 登录DeepSeek平台&am…...

编程日记 2026/4/22 18:16:15

【20250211】栈与队列：1047.删除字符串中的所有相邻重复项

#方法一：使用栈 # class Solution: # def removeDuplicates(self, s): # res [] # for char in s: # #真和消消乐一样，栈外来一个数据，如果和栈顶数据相同，则不仅不入栈，还把栈顶数据…...

编程日记 2026/2/20 23:20:01

使用Hexo部署NexT主体网站

一.使用git提交文件参考： 从零开始搭建个人博客（超详细） - 知乎致谢！ 第一种：本地没有 git 仓库直接将远程仓库 clone 到本地；将文件添加并 commit 到本地仓库；将本地仓库的内容push到远程仓…...

编程日记 2026/3/2 8:50:55

uni getLocation 公众号h5获取定位坐标没有返回

先看代码 //获取经纬度getLocation() {console.log("111")uni.getLocation({type: wgs84,success: function (res) {console.log(当前位置的经度： res.longitude);console.log(当前位置的纬度： res.latitude);},fail: function(err) {conso…...

编程日记 2026/4/11 21:34:22

C语言基本概念————讨论sqrt()和pow()函数与整数的关系

本文来源：C语言基本概念——讨论sqrt()和pow()函数与整数的关系. C语言基本概念——sqrt和pow函数与整数的关系 1. 使用sqrt()是否可以得到完全平方数的精确的整数平方根1.1 完全平方数的计算结果是否精确？1.2 为什么不会出现误差（如 1.99999…...

编程日记 2026/4/11 21:14:35

【时时三省】(C语言基础）什么是算法

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省一个程序主要包括以下两方面的信息： （1）对数据的描述。在程序中，要指定用到哪些数据，以及这些数据的类型和数据组织形式。这就是数…...

编程日记 2026/2/21 15:32:41

Spring Boot 中加载多个 YAML 配置文件

在 Spring Boot 中加载多个 YAML 配置文件是一个常见的需求，通常用于将配置信息分离到多个文件中以便于管理和维护。Spring Boot 提供了灵活的方式来加载多个 YAML 配置文件。以下是一些方法和步骤，用于在 Spring Boot 应用中加载多个 YAML 配置文件&a…...

编程日记 2026/2/19 12:17:58

IPoIB模块初始化过程详解

在现代网络环境中，InfiniBand over IP (IPoIB) 作为一种高性能的网络技术，被广泛应用于数据中心和高性能计算领域。为了确保其稳定性和高效性，Linux内核中的IPoIB模块在加载时需要进行一系列复杂的初始化操作。本文将基于一系列技术对话内容，详细介绍IPoIB模块的初始化流程…...

编程日记 2026/4/10 16:54:12

C语言——排序（冒泡，选择，插入）

基本概念排序是对数据进行处理的常见操作，即将数据按某字段规律排列。字段是数据节点的一个属性，比如学生信息中的学号、分数等，可针对这些字段进行排序。同时，排序算法有稳定性之分，若两个待排序字段一致的数据在排序…...

编程日记 2026/2/26 0:54:20

如何本地部署DeepSeek

第一步：安装ollama https://ollama.com/download 打开官网，选择对应版本第二步：选择合适的模型 https://ollama.com/ 模型名称中的 1.5B、7B、8B 等数字代表模型的参数量（Parameters），其中 B 是英文 B…...

编程日记 2026/4/24 9:24:31

Docker 部署 MySQL-5.7 单机版

一、镜像获取 # docker hub 镜像 docker pull farerboy/mysql:5.7 # 国内阿里镜像 docker pull registry.cn-hangzhou.aliyuncs.com/farerboy/mysql:5.7 以上两个镜像二选一即可二、运行容器 docker run -dti --name mysql \n --privileged \n --cgroupns private \n --e…...

编程日记 2026/2/22 8:00:38

正则表达式--元字符-限定符（4）

正则的限定元字符表示前边一个符号代表的内容出现多少次 1.* ------ 表示0~正无穷次 2. ------ 表示 1~正无穷次 3. ? ------ 表示 0~1次 4. {n} ------ 表示限定 n 次, 不能多也不能少 5. {n,} ------ 表示最少 n 次 6. {n,m} ------ 表示最少 n 次, 最多 m 次 <!DO…...

编程日记 2026/4/11 21:14:30

【CMAEL多智能体框架】第一节环境搭建及简单应用（构建一个鲜花选购智能体）

第一节环境搭建文章目录第一节环境搭建前言一、安装二、获取API1. 使用熟悉的API代理平台2.设置不使用明文存放API 三、具体应用进阶任务总结前言 CAMEL Multi-Agent是一个开源的、灵活的框架，它提供了一套完整的工具和库，用于构建和模拟多智能体…...

编程日记 2026/4/22 2:10:28

网络工程师（31）VLAN

前言 VLAN（Virtual Local Area Network）即虚拟局域网，是一种将物理局域网划分成多个逻辑上独立的虚拟网络的技术。一、定义与特点定义：VLAN是对连接到的第二层交换机端口的网络用户的逻辑分段，不受网络用户的物理位置…...

编程日记 2026/4/16 22:41:13

C++17 新特性解析

C++17 是 C++ 标准的一个重要更新，它在 C++11/14 的基础上引入了许多新特性，进一步简化了代码编写、提升了性能和类型安全性。以下是 C++17 的主要特性分类介绍：一、语言核心改进 1. 结构化绑定（Structured Bindings）允许将元组、结构体或数组的成员直接解包到变量中。…...

编程日记 2026/3/14 7:03:04

泛化、选择、分化

泛化是指记忆联系的“发散”，泛化兴奋的基础是模糊兴奋。记忆联系的“发散”有以下几种种情况： 1、联络区的一原始记忆柱群（A1）具有直接或间接与其它任意联络区的任意原始记忆柱群建立记忆联系的潜力。也就是说任何两个对象&…...

编程日记 2026/3/7 8:50:03

网络安全架构师怎么考网络安全架构

安全通信网络随着现代技术的不断发展，等级保护对象通常通过网络实现资源共享和数据交互，当大量的设备连成网络后，网络安全成了最为关注的问题。按照“一个中心，三重防御”的纵深防御思想，边界外部通过广域网或城域网…...

编程日记 2026/2/24 19:00:30

Android系统分区概述和编译镜像包理解

1. 分区一：bootloader； 设备启动后，会先进入bootloader程序，这里会通过判断开机时的按键组合，选择启动到哪种模式。相当于电脑的bios 这里主要有Android系统、recovery模式（音量上键电源键）、f…...

编程日记 2026/2/28 22:15:04

【案例教程】无人机生态环境监测、图像处理与GIS数据分析综合实践技术应用

专题一、无人机航拍基本流程、航线规划与飞行实践 1.无人机行业应用概况 2.无人机遥感监测简介 3.无人机与传感器类型 4.无人机航线规划设计（谷歌地球软件的使用） 5.无人机飞行软件操作（DJI App设置实践视频） 6.无人机航拍一…...

编程日记 2026/3/1 16:47:49

depcheck检查node.js项目中未使用和缺失依赖的工具

depcheck检查node.js项目中未使用和缺失依赖的工具一、安装二、使用方法 depcheck 是一个用于检查 Node.js 项目中未使用依赖项和缺失依赖项的工具。以下为你详细介绍它的相关信息、使用方法和作用。主要作用: 1.发现未使用的依赖在项目开发过程中，我们可能会安…...

编程日记 2026/3/5 4:33:04

在 C# 中，处理 Excel 和 PDF 文件的库有很多。以下是一些比较常用的选择

读取 Excel 文件的库 NPOI 用途：可以读取和写入 .xls 和 .xlsx 文件。特点：无需安装 Microsoft Office，支持简单的 Excel 操作，如格式化、公式、图表等。 EPPlus 用途：主要用于 .xlsx 格式（Excel 2007 及以…...

编程日记 2026/3/5 22:01:53

HTML之JavaScript函数声明

HTML之JavaScript函数声明 1. function 函数名(){}2. var 函数名 function(){}<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1…...

编程日记 2026/3/5 13:58:10

【算法】动态规划专题⑪ —— 区间DP python

目录引入进入正题回归经典总结引入区间动态规划（区间DP）适用于解决涉及区间最优化的经典问题，如石子合并、最长回文子序列等。进入正题石子合并 https://www.acwing.com/problem/content/284/ 有 N 堆石子排成一排，其编号为…...

编程日记 2026/3/2 5:30:02

异步加载图片体验JS任务操作

定时器的任务轮询

通过文件依赖了解任务排序

宏任务与微任务

定时器的任务编排

进度条

相关文章：