前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标防抖处理、mousemove、debounce()、事件停止触发、超时触发
文章目录
- 代码
- 使用lodashjs库debounce函数做防抖处理（只有鼠标移动停止并超过一定时间，才会触发）
- 手写防抖函数
- 写法1
- 写法2（注意addEventListener监听函数的第二个参数接收的是一个函数，需要构造一个匿名返回函数）
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="stylesheet" href="styles.css"><script src="script.js" defer></script><style>.box {width: 200px; /* 设置宽度 */height: 200px; /* 设置高度 */background-color: lightblue; /* 设置背景颜色 */border: 1px solid #000; /* 可选: 添加边框 */display: flex; /* 使内容居中 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */font-size: 24px; /* 设置字体大小 */}</style>
</head><body><div class="box"></div><script>// 1. 利用防抖实现性能优化// 需求: 鼠标在盒子上移动，里面的数字就会变化 +1const box = document.querySelector('.box');let i = 1;function mouseMove() {box.innerHTML = i++;console.log(i);}// 添加事件box.addEventListener('mousemove', mouseMove);</script>
</body></html>
使用lodashjs库debounce函数做防抖处理（只有鼠标移动停止并超过一定时间，才会触发）
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="stylesheet" href="styles.css"><!-- 引入 lodash 库，用于实现防抖效果 --><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script><script src="script.js" defer></script><style>.box {width: 200px; /* 设置盒子的宽度 */height: 200px; /* 设置盒子的高度 */background-color: lightblue; /* 设置盒子的背景颜色 */border: 1px solid #000; /* 可选: 添加边框 */display: flex; /* 使用 flexbox 布局 */justify-content: center; /* 水平居中内容 */align-items: center; /* 垂直居中内容 */font-size: 24px; /* 设置字体大小 */}</style>
</head><body><div class="box"></div> <!-- 创建一个盒子元素 --><script>// 选择盒子元素const box = document.querySelector('.box');let i = 1; // 初始化计数器// 使用 lodash 的 debounce 方法创建防抖函数// 当鼠标移动时，只有在停止移动 300 毫秒后，才会更新盒子中的数字const mouseMove = _.debounce(function() {box.innerHTML = i++; // 更新盒子中的内容为当前计数器的值，并自增}, 300); // 设置防抖时间为 300 毫秒// 为盒子添加鼠标移动事件监听器box.addEventListener('mousemove', mouseMove);</script>
</body></html>
手写防抖函数
// 手写防抖函数
// 核心是利用 setTimeout定时器来实现
// 1.声明定时器变量
// 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器，如果有先清除以前的定时器
// 3.如果没有定时器，则开启定时器，存入到定时器变量里面
// 4.定时器里面写函数调用
写法1
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="stylesheet" href="styles.css"><!-- 引入 lodash 库（可选，已不再使用） --><script src="script.js" defer></script><style>.box {width: 200px; /* 设置盒子的宽度 */height: 200px; /* 设置盒子的高度 */background-color: lightblue; /* 设置盒子的背景颜色 */border: 1px solid #000; /* 可选: 添加边框 */display: flex; /* 使用 flexbox 布局 */justify-content: center; /* 水平居中内容 */align-items: center; /* 垂直居中内容 */font-size: 24px; /* 设置字体大小 */}</style>
</head><body><div class="box"></div> <!-- 创建一个盒子元素 --><script>// 选择盒子元素const box = document.querySelector('.box');let i = 1; // 初始化计数器let timer; // 声明定时器变量// 手写防抖函数const mouseMove = function() {// 每次鼠标移动(事件触发)的时候都要先判断是否有定时器if (timer) {clearTimeout(timer); // 如果有，先清除以前的定时器}// 开启定时器，存入到定时器变量里面timer = setTimeout(() => {box.innerHTML = i++; // 更新盒子中的内容为当前计数器的值，并自增console.log(i); // 输出当前计数器的值}, 300); // 设置防抖时间为 300 毫秒};// 为盒子添加鼠标移动事件监听器box.addEventListener('mousemove', mouseMove);</script>
</body></html>
写法2（注意addEventListener监听函数的第二个参数接收的是一个函数，需要构造一个匿名返回函数）
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><!-- <link rel="stylesheet" href="styles.css"> --><!-- <script src="script.js" defer></script> --><style>.box {width: 200px;/* 设置盒子的宽度 */height: 200px;/* 设置盒子的高度 */background-color: lightblue;/* 设置盒子的背景颜色 */border: 1px solid #000;/* 可选: 添加边框 */display: flex;/* 使用 flexbox 布局 */justify-content: center;/* 水平居中内容 */align-items: center;/* 垂直居中内容 */font-size: 24px;/* 设置字体大小 */}</style>
</head><body><div class="box"></div> <!-- 创建一个盒子元素 --><script>// 选择盒子元素const box = document.querySelector('.box');let i = 1; // 初始化计数器let timer; // 声明定时器变量// 鼠标移动事件function mouseMove() {box.innerHTML = i; // 显示当前计数器值i++; // 更新计数器console.log(i);}// 防抖函数function debounce(fn, delay) {return function () {console.log("防抖函数被调用"); // 添加调试信息if (timer) {clearTimeout(timer);}timer = setTimeout(() => {fn(); // 调用传入的函数}, delay);};}// 为盒子添加鼠标移动事件监听器box.addEventListener('mousemove', debounce(mouseMove, 300));</script>
</body></html>
相关文章：
前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标防抖处理、mousemove、debounce()、事件停止触发、超时触发
文章目录 代码使用lodashjs库debounce函数做防抖处理（只有鼠标移动停止并超过一定时间，才会触发）手写防抖函数写法1写法2（注意addEventListener监听函数的第二个参数接收的是一个函数，需要构造一个匿名返回函数&#x…...
开源守护，智护童年——幼儿园未成年行为与安全智能监控系统
在孩子成长的每一步，安全始终是第一位的。幼儿园作为孩子们探索世界的起点，其安全管理的重要性不言而喻。然而，哭闹、打闹、意外跌倒，甚至外部隐患如陌生人逗留、内部管理疏漏等问题，常常让传统人工监控捉襟见肘。家长…...
WinForm真入门(5)——控件的基类Control
控件的基类–Control 用于 Windows 窗体应用程序的控件都派生自 Control类并继承了许多通用成员,这些成员都是平时使用控件的过程最常用到的。无论要学习哪个控件的使用，都离不开这些基本成员，尤其是一些公共属性。由于 Conlrol 类规范了控件的基本特征…...
《Linux内存管理：实验驱动的深度探索》【附录】【实验环境搭建 4】【Qemu 如何模拟numa架构】
我们在学习 linux 内核时，会涉及到很多 numa 的知识，那我们该如何在 qemu 中模拟这种情况，来配合我们的学习呢？ 我们该如何模拟 如下的 numa 架构 Qemu 模拟 NUMA 架构 -M virt,gic-version3,virtualizationon,typevirt \ -cp…...
【YOLO系列（V5-V12）通用数据集-工程用车检测数据集】
YOLO格式的工程车检测数据集，适用于YOLOv5-v11所有版本，可以用于本科毕设、发paper、做课设等等，有需要的在这里获取： 【YOLO系列（V5-V12）通用数据集-工程用车检测数据集】 【工程车类型检测数据集】共2655…...
卫星智能化健康管理#卫星工程系列
伴随我国航天业飞速发展，积累了大量的卫星试验数据，如何从海量、多源、多模态的卫星试验数据中挖掘分析出内部规律和潜在价值，构建卫星装备系统的全生命周期试验数据知识体系显得尤为迫切。卫星故障传统的诊断方法局限在门限层面，…...
【面试篇】Mysql
1. 请介绍一下 MySQL 常见的存储引擎（如 InnoDB、MyISAM），它们的特点分别是什么？在什么场景下适合使用 InnoDB，什么场景下适合使用 MyISAM？ InnoDB： 特点：支持事务，具有…...
Neo4j操作数据库（Cypher语法）
Neo4j数据库操作语法 使用的数据库版本 (终端查询) >neo4j --version 2025.03.0批量上传数据 UNWIND [{name: Alice, age: 30},{name: Bob, age: 25} ] AS person CREATE (p:Person) SET p.name = person.name, p.age = person.age RETURN p;查询结点总数 MATCH (n) RETU…...
当AI开始“思考“：大语言模型的文字认知三部曲
引言：从《黑客帝国》说起 1999年上映的科幻经典《黑客帝国》描绘了一个令人震撼的未来图景——人类生活在一个由人工智能构造的数字矩阵中。当我们观察现代大型语言模型的工作原理时，竟发现与这个虚构世界有着惊人的相似：人们正在用矩阵以及矩…...
[GN] Python3基本数据类型 -- 与C的差异
文章目录 前言Python3的基本数据类型6个标准的数据类型NumbersStringListtupleSetsDictionaries Python运算符逻辑 运算符成员运算符身份运算符 Python3 数字Python3 序列序列切片序列相加序列相乘序列相关内置函数 Python3 列表访问列表的值更新列表删除列表元素拼接列表嵌套列…...
公司论坛数据构建情感标注数据集思考
公司论坛有一个评论区，会有小伙伴在上面进行评论，聊天，大部份都是积极向上的，但是也有小小的一部分消极的言论，“就像白纸上的一个黑点”，和产品对接的大佬如是说。所以想思考做一个情感标注数据集…...
MSF上线到CS工具中 实战方案(可执行方案)
目录 实际案例背景 步骤详解 1. 获取低权限 Meterpreter 会话 1.1 使用 Metasploit 获取会话 2. 提权到 SYSTEM 权限 2.1 使用 getsystem 自动提权 2.2 如果 getsystem 失败：使用令牌冒充 (incognito 模块) 3. 上线到 Cobalt Strike 3.1 生成 Cobalt Strik…...
ffmpeg中格式转换需要注意点总结
某些封装格式(例如MP4/FLV/MKV等)的H.264码流的SPS和PPS信息存储在AVCodeccontext结构体的extradata中。分离某些封装格式(例如MP4/FLV/MKV等)中的H.264的时候，需要首先写入SPS和PPS，否则会导致分离出来的数据没有SPS、PPS而无法播。需要使用ffmpeg中名称…...
IntelliJ IDEA 2020~2024 创建SpringBoot项目编辑报错: 程序包org.springframework.boot不存在
目录 前奏解决结尾 前奏 哈！今天在处理我的SpringBoot项目时，突然遇到了一些让人摸不着头脑的错误提示： java: 程序包org.junit不存在 java: 程序包org.junit.runner不存在 java: 程序包org.springframework.boot.test.context不存在 java:…...
基于DeepSeek、ChatGPT支持下的地质灾害风险评估、易发性分析、信息化建库及灾后重建
前言： 地质灾害是指全球地壳自然地质演化过程中，由于地球内动力、外动力或者人为地质动力作用下导致的自然地质和人类的自然灾害突发事件。在降水、地震等自然诱因的作用下，地质灾害在全球范围内频繁发生。我国不仅常见滑坡灾害，还…...
Websoft9分享：在数字化转型中选择开源软件可能遇到的难题
引言：中小企业数字化转型的必由之路 全球94.57%的企业已采用开源软件（数据来源：OpenLogic 2024报告)，开源生态估值达8.8万亿美元。中小企业通过开源软件构建EPR系统、企业官网、数据分析平台等，可节省80%软件采购成本。…...
《在 Ubuntu 22.04 上安装 CUDA 11.8 和 Anaconda，并配置环境变量》
安装 CUDA 11.8 和 Anaconda 并配置环境变量 在本教程中，我们将介绍如何在 Ubuntu 22.04 上安装 CUDA 11.8 和 Anaconda，并配置相应的环境变量。我们还将配置使用 阿里云镜像源 来加速软件包更新。以下是具体步骤。 步骤 1：更新软件源 首先…...
【蓝桥杯】算法笔记3
1. 最长上升子序列（LIS） 1.1. 题目 想象你有一排数字，比如：3, 1, 2, 1, 8, 5, 6 你要从中挑出一些数字，这些数字要满足两个条件： 你挑的数字的顺序要和原来序列中的顺序一致（不能打乱顺序） 你挑的数字要一个比一个大（严格递增） 问：最多能挑出多少个这样的数字？ …...
Windows修改hosts文件让向日癸软件联网
Windows修改hosts文件让向日癸软件联网 前言一、查看向日葵软件使用的网址及IP1.清除dns记录2.打开向日葵软件并将dns记录导出txt 二、修改Windows服务器的hosts文件1.winx选择Windows PowerShell(管理员)2.在Windows PowerShell中输入如下内容：3.在hosts文件最后添…...
2021 CCF CSP-S2.括号序列
题目 4091. 括号序列 算法标签: 区间 d p dp dp 思路 区间 d p dp dp添加维表示形态 f [ i ] [ j ] [ k ] f[i][j][k] f[i][j][k], 对于每种形态考虑状态如何进行转移, 枚举的时候不能重复, 星号也要定义唯一的解析方式, 算法时间复杂度 O ( n 3 ) O(n ^ 3) O(n3) 代码 #…...
Uni-app 项目 PDF 批注插件库在线版 API 示例教程
本文章介绍 Uni-app 项目中 PDF 批注插件库 ElasticPDF 在线版 API 示例教程，API 包含 ① 导出批注后PDF数据；② 导出纯批注 json 数据；③ 加载旧批注；④ 切换文档；⑤ 切换用户；⑥ 清空批注 等数据处理功能…...
学透Spring Boot — 010. 单元测试和Spring Test
系列文章目录 这是CSDN postnull 博客《学透Spring Boot》系列的一篇，更多文章请移步：Postnull - 学透Spring Boot系列文章 文章目录 系列文章目录前言1. 基本概念UT 单元测试TDD 测试驱动开发UT测试框架Mock框架 3. Spring Test为什么要用Spring Test引…...
TortoiseGit多账号切换配置
前言 之前配置好的都是，TortoiseGit与Gitee之间的提交，突然有需求要在GitHub上提交，于是在参考网上方案和TortoiseGit的帮助手册后，便有了此文。由于GitHub已经配置完成，所以下述以配置Gitee为例。因为之前是单账号使用…...
3D 地图渲染-区域纹理图添加
引入-初始化地图（关键代码） // 初始化页面引入高德 webapi -- index.html 文件 <script src https://webapi.amap.com/maps?v2.0&key您申请的key值></script>// 添加地图容器 <div idcontainer ></div>// 地图初始化应该…...
【Linux】条件变量封装类及环形队列的实现
📢博客主页：https://blog.csdn.net/2301_779549673 📢博客仓库：https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正！ &…...
离线部署kubesphere（已有k8s和私有harbor的基础上）
前言说明：本文是在已有k8s集群和私有仓库harbor上进行离线安装kubesphere；官网的离线教程写都很详细，但是在部署部份把搭建集群和搭建仓库也写一起了，跟着做踩了点坑，这里就记录下来希望可以帮助到需要的xdm。 1.根据官…...
非阻塞IO，fcntl，多路转接，select，poll，epoll，reactor
IO次数会影响程序的效率，在编程中往往会尽量减少IO次数，用以提高程序的效率，例如缓冲区,就是减少IO次数提高效率的一种方式；而IO影响效率的最大原因其实是因为IO等拷贝，在进行IO时往往需要拷贝的数据就绪，或…...
Redis常用的数据结构及其使用场景
字符串(String) string 是 redis 最基本的类型，你可以理解成与 Memcached 一模一样的类型，一个 key 对应一个 value。 string 类型是二进制安全的。意思是 redis 的 string 可以包含任何数据，比如jpg图片或者序列化的对象。 string 类型是 R…...
PhotoShop学习04
1.背景图层 最下面的被锁锁住的图层为背景图层，背景图层充当整个图层的背景，名字标注为背景，无法修改背景图层的排序始终位于图层最底部。 当我想把上方的图层移动到背景图层之后，发现无法移动图层无法移动，把背景图层…...
服务器有2张显卡，在别的虚拟环境部署运行了Xinference，然后又建个虚拟环境再部署一个可以吗？
环境： 云服务器Ubuntu系统 2张 NVIDIA H20 96GB Qwen2.5-VL-72B-Instruct-AWQ Qint4量化 AWQ 是 “Activation - Aware Weight Quantization” 的缩写，即激活感知权重量化。它是一种针对大型模型的先进量化算法，通过在权重量化过程中引入对激活值的感知，最小化量化误差…...