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

JavaScript WebAPI（三）（详解）

news 2025/12/22 21:34:01

这次介绍一下webAPI中的一些知识：

回调函数

回调函数是指 如果将函数A做为参数传递给函数B时，我们称函数A为回调函数

例如：

// 立即执行函数中传递的函数是一个回调函数
(function(){  console.log("我是回调函数")
})();
// 监听事件中传递的参数是一个回调函数
const div = document.querySelector('div')
div.addEventListener('click',function(){console.log("我是回调函数")
})

只需要记住，如果一个函数A调用函数B作为自己的参数，那么函数B就是回调函数

时间戳

定义：

时间戳是指用来表示某个时间点的数字或字符串。它通常是一个长整型数字，表示自某个固定的起始时间（如1970年1月1日00:00:00 UTC）到某个特定时间点所经过的秒数或毫秒数。时间戳在计算机系统中广泛应用，用于记录事件发生时间、排序、计时等方面。

时间戳的定义可以有多种形式，最常见的是UNIX时间戳，即从1970年1月1日00:00:00 UTC开始计算的秒数。例如，当前时间的UNIX时间戳可以表示为一个长整型数字，比如1638356433。

获取时间戳的三种方式：

  1. 使用方法(getTime())获取
    创建一个Date对象然后调用方法getTime()     
    const time = new Date()
console.log(time.getTime())
  2. 直接输出
    创建一个事件对象直接使用他的返回值     
    console.log(+new Date())
  3. 调用方法 
    console.log(Date.now())

可以使用 Date`构造函数来创建指定的日期和时间，构造函数的参数可以是数字、字符串或按年月日等顺序的多个数值。

例如，下面的代码创建了一个 Date 对象来表示 2022 年 10 月 24 日，上午 11 点 30 分：

const date = new Date(2022, 9, 24, 11, 30, 0);

移动端事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;margin: 100px auto;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')div.addEventListener('touchstart', function () {console.log("开始触摸")})div.addEventListener('touchend', function () {console.log('离开了')})div.addEventListener('touchmove', function () {console.log('一直摸，移动')})</script>
</body></html>


 

windows对象

将他称为BOM对象：这张图片整合的非常好，我直接放到这里了

 

一些常见的Window对象的属性和方法包括：

  • window.alert()：在屏幕上弹出一个警告框。
  • window.prompt()：在屏幕上弹出一个提示框，要求用户输入文本。
  • window.confirm()：在屏幕上弹出一个确认框，要求用户选择“确定”或“取消”。
  • window.location：表示当前页面的URL地址。
  • window.history：表示浏览器的历史记录，可以通过history.back()和history.forward()方法回退和前进历史记录。
  • window.document：表示当前页面的文档对象，可以通过它访问和修改页面中的元素和内容。
  • window.setTimeout()和window.setInterval()：用于设置定时器，可以在指定的时间后执行一段代码，或每隔一段时间执行一段代码。
  • window.XMLHttpRequest()：用于创建XMLHttpRequest对象，可以发送HTTP请求和接收服务器返回的数据。

定时器

重复执行

setInterval()是Window对象提供的一个方法，用于设置定时器，重复执行指定的代码或函数。它接受两个参数：要执行的代码或函数，以及执行的时间间隔（以毫秒为单位）。

setInterval(code, delay)
  • code：要执行的代码或函数。可以直接传入一段代码，也可以传入一个函数名。
  • delay：执行的时间间隔，以毫秒为单位。

例如，下面的代码会每隔1秒钟输出一次"Hello, World!"：

setInterval(function() {console.log("Hello, World!");
}, 1000);

定时器会按照指定的时间间隔循环执行指定的代码或函数，直到页面被关闭或调用clearInterval()停止定时器。

需要注意返回的值是唯一的，一个定时器对应一个标识符，可以使用这个标识符来取消定时器，即停止代码的执行。可以使用clearInterval()方法来取消定时器，示例如下：

var timerId = setInterval(function() {console.log("Hello, World!");
}, 1000);// 取消定时器
clearInterval(timerId);

定时器-延时函数：

定时执行相应的行为：只执行一次

用法和setInterval相似，填写等待事件 和 执行行为，清除也是调用只有一个标识符，没调用一次生成一个唯一的标识符，清除标识符clearsetTimeout

<!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>const l = setInterval(() => {console.log(1)}, 1000);setTimeout(function(){clearInterval(l)console.log("清除成功")},3000)</script>
</body>
</html>

js执行机制

同步任务：就是再主线程上进行，形成一个执行栈

异步任务：

  1. 执行栈（Execution Stack）：JavaScript代码的执行过程中，使用执行栈来管理函数调用和执行上下文。

  2. 任务队列（Task Queue）：包括宏任务队列（macrotask queue）和微任务队列（microtask queue）。常见的宏任务包括setTimeout、setInterval、I/O操作等，而微任务包括Promise、MutationObserver等。

  3. 事件循环（Event Loop）：不断地从任务队列中取出任务，放入执行栈中执行，这个过程就是事件循环。事件循环会不断地从任务队列中取出任务，放到执行栈中执行，直到任务队列为空。

location

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

常用的属性和方法：

属性：

  • location.href：获取或设置完整的 URL。
  • location.protocol：获取或设置 URL 的协议部分（如 "http:"、"https:"）。
  • location.host：获取或设置 URL 的主机部分（包括主机名和端口号）。
  • location.hostname：获取或设置 URL 的主机名部分。
  • location.port：获取或设置 URL 的端口号部分。
  • location.pathname：获取或设置 URL 的路径部分。
  • location.search：获取或设置 URL 的查询字符串部分（即问号后面的内容）。
  • location.hash：获取或设置 URL 的片段标识符部分（即井号后面的内容）。

方法：

  • location.assign(url)：加载指定的 URL，作为新的文档。
  • location.reload()：重新加载当前文档。
  • location.replace(url)：用指定的 URL 替换当前文档，且不会生成新的历史记录。

navgator对象

检测设备然后查看是否需要自动跳转到对应的设备网站

history对象：

执行前进或者后退操作

back()执行的是后退的功能
forward()前进功能
go(参数)参数1前进 参数2 后退

本地储存:

localStorage：可以将数据永久储存到本地(电脑文件),除非手动删除，否则关闭页面也会存在

特性:

        可以多窗口(页面共享)

        以键值对的形式储存使用

储存数据:

语法：

储存数据:localStorage.setItem(key,value)

获取数据:localStorage.getItem(key)

删除数据.localStorage.removeItem(key)

// 存储数据
localStorage.setItem('key', 'value');// 获取数据
var value = localStorage.getItem('key');// 删除数据
localStorage.removeItem('key');

sessionStorage: 该对象用于临时保存数据，数据只在当前会话期间有效。当用户关闭了浏览器窗口或标签页后，数据会被清除。

// 存储数据
sessionStorage.setItem('key', 'value');// 获取数据
var value = sessionStorage.getItem('key');// 删除数据
sessionStorage.removeItem('key');

IndexedDB: IndexedDB是一种更高级的本地数据库解决方案，可以存储结构化数据。它提供了一个异步API，允许开发者执行复杂的数据库操作。

下面是使用IndexedDB进行基本操作的示例：

// 打开或创建数据库
var request = window.indexedDB.open('databaseName', version);// 监听打开数据库的成功事件
request.onsuccess = function(event) {var db = event.target.result;// 执行数据库操作// ...
};// 监听打开数据库的错误事件
request.onerror = function(event) {console.error("Database error: " + event.target.errorCode);
};// 创建一个对象存储空间
var objectStore = db.createObjectStore('storeName', { keyPath: 'key' });// 存储数据
var transaction = db.transaction('storeName', 'readwrite');
var store = transaction.objectStore('storeName');
store.put({ key: 'key1', value: 'value1' });// 获取数据
var getRequest = store.get('key1');
getRequest.onsuccess = function(event) {var result = event.target.result;console.log(result);
};// 删除数据
var deleteRequest = store.delete('key1');
deleteRequest.onsuccess = function(event) {console.log("Data deleted successfully");
};

相关文章：

JavaScript WebAPI（三）（详解）

这次介绍一下webAPI中的一些知识&#xff1a; 回调函数 回调函数是指 如果将函数A做为参数传递给函数B时&#xff0c;我们称函数A为回调函数 例如&#xff1a; // 立即执行函数中传递的函数是一个回调函数 (function(){ console.log("我是回调函数") })(); // …...

编程日记 2023/12/2 21:33:03

LeetCode哈希表：最长连续序列

LeetCode哈希表&#xff1a;最长连续序列 题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&…...

编程日记 2023/12/2 21:31:01

SpringBoot+redis实现接口防刷

写一个RedisService&#xff0c;实现获取Redis 的set、get、incr&#xff08;相当于计数器&#xff09; 写inferface注解类 做一个拦截器&#xff0c;因为要先于控制器判断 将拦截器注入Springboot 文章目录 目录 文章目录 前言 一、引入依赖 二、使用步骤 2.1 RedisServic…...

编程日记 2023/12/2 21:22:52

5G承载网和大客户承载的演进

文章目录 移动4/5G承载网联通和电信4/5G承载网M-OTN&#xff08;Metro-optimized OTN&#xff09;&#xff0c;城域型光传送网PeOTN&#xff08;packet enhanced optical transport network&#xff09;&#xff0c;分组增强型OTN板卡增强型PeOTN集中交叉型PeOTN VC-OTN&#x…...

编程日记 2023/12/2 21:16:37

智慧工地一体化解决方案（里程碑管理）源码

智慧工地为管理人员提供及时、高效、优质的远程管理服务&#xff0c;提升安全管理水平&#xff0c;确保施工安全提高施工质量。实现对人、机、料、法、环的全方位实时监控&#xff0c;变被动“监督”为主动“监控”。 一、建设背景 施工现场有数量多、分布广&#xff0c;总部统…...

编程日记 2023/12/2 21:15:36

熬夜会秃头——beta冲刺Day2

这个作业属于哪个课程2301-计算机学院-软件工程社区-CSDN社区云这个作业要求在哪里团队作业—beta冲刺事后诸葛亮-CSDN社区这个作业的目标记录beta冲刺Day2团队名称熬夜会秃头团队置顶集合随笔链接熬夜会秃头——Beta冲刺置顶随笔-CSDN社区 目录 一、团队成员会议总结 1、成员…...

编程日记 2023/12/2 21:14:35

【linux】信号——信号保存+信号处理

信号保存信号处理 1.信号保存1.1信号其他相关概念1.2信号在内核中的表示 2.信号处理2.1信号的捕捉流程2.2sigset_t2.3信号集操作函数2.4实操2.5捕捉信号的方法 3.可重入函数4.volatile5.SIGCHLD信号 自我名言&#xff1a;只有努力&#xff0c;才能追逐梦想&#xff0c;只有努力…...

编程日记 2023/12/2 21:13:34

雷军：我的程序人生路

今天有朋友发给我一篇我在20年前在BBS上写的帖子。那还是1996年&#xff0c;我们通过电话线拨号连接到西点BBS上飙帖子玩的年代。那是一个互联网混沌初开的年代&#xff0c;那是一个BBS和Email几乎主宰了全部互联网的年代&#xff0c;那是一个青春的理想和热血沸腾的年代。 我…...

编程日记 2023/12/2 21:11:33

Linux 磁盘分区处理

最近实施过程中遇到客户提供给我们的服务器操作系统和Docke容器环境都已经安装完成&#xff0c;但磁盘的分区没有进行整理好。磁盘总共270G&#xff0c;系统安装分配了60G&#xff0c;剩余未创建分配需要处理。由于分区情况每家不一样&#xff0c;但大致流程都是相同的&#xf…...

编程日记 2023/12/2 21:10:31

利用ogr2ogr从PostGIS中导出/导入Tab/Dxf/Geojson等格式数据

ogr2ogr Demo Command 先查看下当前gdal支持的全部格式&#xff0c;部分gdal版本可能不支持PostGIS。 如出现PostgreSQL表名支持。 #全部支持的格式 ogrinfo --formats | sort #AVCBin -vector- (rov): Arc/Info Binary Coverage #AVCE00 -vector- (rov): Arc/Info E00 (ASC…...

编程日记 2023/12/2 21:08:30

【深度优先】LeetCode1932:合并多棵二叉搜索树

作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你 n 个 二叉搜索树的根节点 &#xff0c;存储在数组 trees 中&#xff08;下标从 0 开始&#xff09;&#xff0c;对应 n 棵不同的二叉搜索树。trees 中的每棵二叉搜索树 最多有 3 个节点 &#xff0…...

编程日记 2023/12/2 21:06:28

monorepo多项目管理主流实现方式：1.learn + yarn/npm workspace 2.pnpm

npm域级包 随着npm包越来越多&#xff0c;而且包名也只能是唯一的&#xff0c;如果一个名字被别人占了&#xff0c;那你就不能再使用这个名字&#xff1b;假设我想要开发一个utils包&#xff0c;但是张三已经发布了一个utils包&#xff0c;那我的包名就不能叫utils了&#xff…...

编程日记 2023/12/2 21:05:26

【斗罗二】暗杀霍雨浩行动，马小桃霸气回击，江楠楠首秀武魂兔兔

Hello,小伙伴们&#xff0c;我是拾荒君。 《斗罗大陆Ⅱ绝世唐门》第25集更新了&#xff01;和小伙伴们一样&#xff0c;一更新&#xff0c;拾荒君就急不可待地观看这一集。故事情节高潮迭起&#xff0c;尤其是霍雨浩与王冬面对六名杀手的惊险场景&#xff0c;真是让人心跳加速…...

编程日记 2023/12/2 21:03:24

[ 蓝桥杯Web真题 ]-年度明星项目

目录 引入 介绍 准备 目标 效果 规定 思路 知识补充 解答参考 引入 hello&#xff0c;大家好&#xff01;我注意到了之前发的一篇蓝桥杯Web应用开发的文章是关注度最高的&#xff0c;可能大部分关注我的小伙伴对蓝桥杯Web应用开发比较感兴趣&#xff0c;或者想要参加…...

编程日记 2023/12/2 21:01:22

Maven终端打包时报Unknown lifecycle phase “.test.skip=true“

错误实例代码 mvn clean package -Dmaven.test.skiptrue 再windows的cmd窗口进行项目打包&#xff0c;需要将参数用英文符号包裹起来“ ” 【正确的实例】&#xff1a;mvn clean package ’-Dmaven.test.skiptrue‘ PS D:\BaiduNetdiskDownload\qian\Springboot-Vue\bi…...

编程日记 2023/12/2 21:00:22

Linux MIPI 调试中常见的问题

一、概述 做嵌入式工作的小伙伴知道&#xff0c;有时候程序编写没有调试过程中费时&#xff0c;之间笔记里有 MIPI 摄像头驱动开发的过程&#xff0c;有需要的小伙伴可以参考&#xff1a;Linux RN6752 驱动编写。而我也是第一次琢磨 MIPI 协议&#xff0c;其中有很多不明白的地…...

编程日记 2023/12/2 20:57:18

使用极限网关助力 ES 集群无缝升级、迁移上/下云

在工作中大家可能会遇到以下这些场景&#xff1a; 自建 ES 集群需要平滑迁移到 XX 云&#xff1b;从 XX 云将 ES 集群迁移到自建机房&#xff1b;ES 集群进行跨版本升级&#xff0c;同时保留回退能力&#xff1b; 这些场景往往都还有个共同的需求&#xff1a;迁移过程要保证业…...

编程日记 2023/12/2 20:56:17

RedisTemplate的配置和讲解以及和StringRedisTemplate的区别

本文主要讲redisTempalte的几种常用的序列化方式 string&#xff0c;我们大部分情况下都希望存入redis的数据可读性强一些&#xff0c;并且value也不总是一个规则的类型&#xff0c;所以这里也是不用json序列化的原因&#xff0c;可以更自由方便&#xff0c;下边提供配置方法 …...

编程日记 2023/12/2 20:52:11

在oracle中的scn技术

SCN可以说是Oracle中一个很基础的部分&#xff0c;但同时它也是一个很重要的。它是系统中维持数据的一致性和顺序恢复的重要标志&#xff0c;是数据库非常重要的一种数据结构。 转载&#xff1a;深入剖析 - Oracle SCN机制详细解读 - 知乎 (zhihu.com)https://zhuanlan.zhihu.…...

编程日记 2023/12/2 20:51:10

LINUX 嵌入式C编程--信号编程

基本概念 信号是事件发生时对进程的通知机制&#xff0c;也可以把它称为软件中断。信号与硬件中断的相似之处在于能够打断程序当前执行的正常流程&#xff0c;其实是在软件层次上对中断机制的一种模拟。信号提供了一种处理异步事件的方法。 信号目的 **信号的目的是用来通信…...

编程日记 2023/12/2 20:50:08

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/12/22 10:49:27

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/12/18 15:23:39

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/22 19:40:26

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/12/19 0:15:23

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/12/20 15:01:20

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/12/16 16:33:37

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/12/17 2:34:49

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构，使它们在 VS 解决方案资源管理器中以“组”（Filter）的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总（共4种） 方法描述是否推荐…...

编程新知 2025/12/4 15:47:17