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

JavaScript WebAPI（三）（详解）

news 2025/9/17 1:44:42

这次介绍一下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

从深圳崛起的“机器之眼”：赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

编程新知 2025/9/9 14:55:19

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2025/8/26 23:06:46

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2025/9/13 0:08:53

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/9/2 21:29:46

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2025/9/3 15:45:36

LLMs 系列实操科普（1）

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

编程新知 2025/9/2 17:48:39

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/9/2 17:48:53

（一）单例模式

一、前言 单例模式属于六大创建型模式，即在软件设计过程中，主要关注创建对象的结果，并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计，从而隐藏了类对象的实例是如何被创建的，封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

编程新知 2025/9/1 20:02:32

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

在树莓派上添加音频输入设备的几种方法

在树莓派上添加音频输入设备可以通过以下步骤完成&#xff0c;具体方法取决于设备类型&#xff08;如USB麦克风、3.5mm接口麦克风或HDMI音频输入&#xff09;。以下是详细指南&#xff1a; 1. 连接音频输入设备 USB麦克风/声卡&#xff1a;直接插入树莓派的USB接口。3.5mm麦克…...

编程新知 2025/7/8 17:49:38