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

前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标节流处理、throttle、限制触发频率（setTimeout、clearInterval）

article 2026/2/6 19:16:57

文章目录

    • 使用lodashjs库
    • 手动实现节流（通过判断之前设定的定时器setTimeout是否存在）

使用lodashjs库

<!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><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script><!-- <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;function mouseMove() {box.innerHTML = i++; // 显示当前计数器值console.log(i);}// 使用 lodash 的 throttle 函数进行节流box.addEventListener('mousemove', _.throttle(mouseMove, 3000)); // 每3000毫秒调用一次</script>
</body></html>

在这里插入图片描述

手动实现节流（通过判断之前设定的定时器setTimeout是否存在）

<!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;function mouseMove() {box.innerHTML = i++; // 显示当前计数器值console.log(i);}function throttle(fn, delay) {let timer = null;return function () {console.log('判断定时器是否为空？', timer);if (!timer) {console.log('定时器为空，延迟执行');timer = setTimeout(() => {fn(); // 在里面就是延迟执行，在外面就是立即执行timer = null;}, delay);}console.log('不执行');}}// 使用 lodash 的 throttle 函数进行节流box.addEventListener('mousemove', throttle(mouseMove, 3000)); // 每3000毫秒调用一次</script>
</body></html>

在这里插入图片描述

相关文章：

前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标节流处理、throttle、限制触发频率（setTimeout、clearInterval）

文章目录 使用lodashjs库手动实现节流&#xff08;通过判断之前设定的定时器setTimeout是否存在&#xff09; 使用lodashjs库 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Com…...

编程日记 2026/2/1 14:31:03

在 Android Studio 中运行安卓应用到 MuMu 模拟器

一、准备工作 1、​​确保 MuMu 模拟器已正确安装并启动​​ 从官网下载安装最新版 MuMu 模拟器。启动后&#xff0c;建议在设置中调整性能参数&#xff08;如 CPU 核心数和内存分配&#xff09;&#xff0c;以保证流畅运行。 2、​​配置 Android Studio 环境​&#xff08;按…...

编程日记 2026/2/1 13:52:28

从文本到多模态：如何将RAG扩展为支持图像+文本检索的增强生成系统？

目录 从文本到多模态&#xff1a;如何将RAG扩展为支持图像文本检索的增强生成系统&#xff1f; 一、为什么需要扩展到多模态&#xff1f; 二、多模态 RAG 系统的基本架构 三、关键技术点详解 &#xff08;一&#xff09;多模态嵌入&#xff08;Embedding&#xff09;技术 …...

编程日记 2025/12/7 8:20:42

【JavaEE】网络原理详解

1.❤️❤️前言~&#x1f973;&#x1f389;&#x1f389;&#x1f389; Hello, Hello~ 亲爱的朋友们&#x1f44b;&#x1f44b;&#xff0c;这里是E绵绵呀✍️✍️。 如果你喜欢这篇文章&#xff0c;请别吝啬你的点赞❤️❤️和收藏&#x1f4d6;&#x1f4d6;。如果你对我的…...

编程日记 2026/2/1 13:52:33

Python项目-基于Flask的个人博客系统设计与实现(2)

源代码 续 {% extends base.html %}{% block title %}评论管理{% endblock %}{% block content %} <div class"container py-4"><div class"row"><div class"col-md-3"><div class"list-group mb-4"><a h…...

编程日记 2026/2/1 18:24:21

洛谷题单3-P1720 月落乌啼算钱（斐波那契数列）-python-流程图重构

题目描述 给定一个整数 N N N&#xff0c;请将该数各个位上数字反转得到一个新数。新数也应满足整数的常见形式&#xff0c;即除非给定的原数为零&#xff0c;否则反转后得到的新数的最高位数字不应为零&#xff08;参见样例 2&#xff09;。 输入格式 一个整数 N N N。 …...

编程日记 2026/1/27 1:56:41

NOIP2013提高组.华容道

题目 509. 华容道 算法标签: 搜索, b f s bfs bfs, s p f a spfa spfa 思路 不难发现, 在人移动的过程中, 箱子是不动的, 从当前位置到下一个箱子旁边的位置不会移动箱子, 可以预处理出人在每个位置到其他位置的距离预处理, 从某一个状态出发, 走到另一个状态的最短路使…...

编程日记 2026/2/2 22:40:19

政安晨【超级AI工作流】—— 基于COZE探索有趣的主题互动问答工作流（同宇宙儿童提问机）

政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 希望政安晨的博客能够对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff01; 本例&#xff0c;我们将从零展示如何创建一款专门针对儿童对某项主题进行问答的对话流智能体…...

编程日记 2026/2/1 13:52:29

Derivatives and Differentiation (导数和微分)

Derivatives and Differentiation {导数和微分} 1. Derivatives and Differentiation (导数和微分)1.1. Visualization Utilities 2. Chain Rule (链式法则)3. DiscussionReferences For a long time, how to calculate the area of a circle remained a mystery. Then, in Anc…...

编程日记 2026/2/1 13:52:31

P17_ResNeXt-50

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 一、模型结构 ResNeXt-50由多个残差块&#xff08;Residual Block&#xff09;组成&#xff0c;每个残差块包含三个卷积层。以下是模型的主要结构&#xff1…...

编程日记 2026/2/5 12:17:21

Ubuntu上离线安装ELK（Elasticsearch、Logstash、Kibana）

在 Ubuntu 上离线安装 ELK（Elasticsearch、Logstash、Kibana）的完整步骤如下： 一.安装验证 二.安装步骤 1. 在联网机器上准备离线包 (1) 安装依赖工具 #联网机器 sudo apt update sudo apt install apt-rdepends wget(2) 下载 ELK 的 .deb 安装包 #创建目录将安装包下载…...

编程日记 2026/2/5 19:23:57

PyCharm 下载与安装教程：从零开始搭建你的 Python 开发环境

PyCharm 是一款专为 Python 开发设计的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它提供了强大的代码编辑、调试、版本控制等功能&#xff0c;是 Python 开发者的必备工具之一。如果你是初学者&#xff0c;或者正在寻找一款高效的开发工具&#xff0c;这篇文章将帮助…...

编程日记 2026/2/5 11:38:36

TSMaster在新能源汽车研发测试中的硬核应用指南

——从仿真到标定&#xff0c;全面赋能智能汽车开发 引言&#xff1a;新能源汽车测试的挑战与TSMaster的破局之道 新能源汽车的快速发展对研发测试提出了更高要求&#xff1a;复杂的电控系统、高实时性通信需求、多域融合的验证场景&#xff0c;以及快速迭代的开发周期。传统测…...

编程日记 2026/2/5 15:38:31

C/C++的条件编译

一、什么是条件编译&#xff1f; 条件编译是指在编译阶段根据某些条件来决定是否编译某段代码。这通常通过预处理指令来实现&#xff0c;比如 #if、#ifdef、#ifndef、#else、#elif 和 #endif。 二、为什么使用条件编译&#xff1f; ​​跨平台开发​​&#xff1a;不同的操作…...

编程日记 2026/2/5 22:02:39

使用 requests 和 BeautifulSoup 解析淘宝商品

以下将详细解释如何通过这两个库来实现按关键字搜索并解析淘宝商品信息。 一、准备工作 1. 安装必要的库 在开始之前&#xff0c;确保已经安装了 requests 和 BeautifulSoup 库。如果尚未安装&#xff0c;可以通过以下命令进行安装&#xff1a; bash pip install requests…...

编程日记 2025/11/16 15:30:31

安装 TabbyAPI+Exllamav2 和 vLLM 的详细步骤

在 5090 显卡上成功安装 TabbyAPIExllamav2 和 vLLM 并非易事&#xff0c;经过一番摸索&#xff0c;我总结了以下详细步骤&#xff0c;希望能帮助大家少走弯路。 重要提示&#xff1a; 用户提供的 PyTorch 安装使用了 cu128&#xff0c;这并非标准 CUDA 版本。请根据你的系统实…...

编程日记 2025/11/15 23:14:15

小动物多导生理记录仪产品需求定义

小动物多导生理记录仪的产品需求定义如下&#xff1a; 功能需求 信号采集功能&#xff1a;能采集多种生理信号&#xff0c;如心电、脑电、肌电、眼电、胃肠电、诱发电位、神经电位、细胞电位、有创血压、无创血压、dP/dt、体温、肌张力、呼吸波、呼吸流速、组织血流速度、血管…...

编程日记 2026/1/19 8:35:45

深入理解C++引用：从基础到现代编程实践

一、引用的本质与基本特性 1.1 引用定义 引用是为现有变量创建的别名&#xff0c;通过&符号声明。其核心特点&#xff1a; 必须初始化且不能重新绑定 与被引用变量共享内存地址 无独立存储空间&#xff08;编译器实现&#xff09; 类型必须严格匹配 int value 42; in…...

编程日记 2025/11/26 5:51:11

黑白彩色相机成像原理

文章目录 黑白相机成像原理彩色相机成像原理 黑白相机成像原理 参考&#xff1a;B站优致谱视觉 光线聚焦&#xff1a;相机镜头将外界景物反射的光线聚焦到相机内部的成像平面上。光电转换&#xff1a;成像平面上通常是图像传感器&#xff0c;黑白相机常用的是CCD&#xff08…...

编程日记 2026/2/6 5:17:29

室内指路机器人是否支持环境监测功能？

并非所有室内指路机器人都具备环境监测功能。那些支持环境监测的室内指路机器人&#xff0c;往往在设计上进行了针对性的优化&#xff0c;搭载了一系列先进且实用的传感器。温湿度传感器犹如一位敏锐的 “温度湿度侦探”&#xff0c;时刻精准地监测室内温度与湿度&#xff0c;为…...

编程日记 2026/2/1 10:18:55

去中心化自治组织（DAO）：革新未来治理的下一站

去中心化自治组织（DAO）：革新未来治理的下一站 引言 去中心化自治组织（DAO）的诞生，像是互联网时代的一道新曙光。它打破了传统组织的等级壁垒，以去中心化和智能合约为核心，让社区成员能够直接参与决策并共享收益。从NFT社区到投资基金，DAO的应用场景正以前所未有的速…...

编程日记 2025/11/18 1:29:37

Docker安装、配置Mysql5.7

1.创建必要的目录 # 创建目录 mkdir -p ~/docker/software/mysql/{conf,log,data} 2.如果没有docker-compose.yml文件的话&#xff0c;先创建docker-compose.yml 配置文件一般长这个样子 version: 3services:mysql:image: mysql:5.7.36container_name: mysqlports:- "…...

编程日记 2025/11/20 5:58:47

#管理Node.js的多个版本

在 Windows 11 上管理 Node.js 的多个版本&#xff0c;最方便的方法是使用 nvm-windows&#xff08;Node Version Manager for Windows&#xff09;。它允许你轻松安装、切换和管理多个 Node.js 版本。 &#x1f4cc; 方法 1&#xff1a;使用 nvm-windows&#xff08;推荐 ✅&a…...

编程日记 2025/11/12 5:27:25

基于DrissionPage的Taptap热门游戏数据爬虫实战：从Requests到现代爬虫框架的迁移指南（含完整代码复制）

目录 ​编辑 一、项目重构背景与技术选型 1.1 原代码问题分析 1.2 DrissionPage框架优势 二、环境配置与基础改造 2.1 依赖库安装 2.2 基础类改造 三、核心功能模块重构 3.1 请求参数自动化生成 3.2 智能页面渲染 3.3 数据解析优化 四、数据库操作增强 4.1 批量插入…...

编程日记 2026/2/1 13:52:34

Online Sparse Reconstruction for Scanning Radar Using Beam-Updating q-SPICE论文阅读

Online Sparse Reconstruction for Scanning Radar Using Beam-Updating q -SPICE 论文概述关键技术与创新点实验结果学术术语解释1. 论文的研究目标与实际问题2. 论文提出的新方法、模型与公式2.1 核心方法：Beam-Updating q-SPICE2.1.1 循环最小化（Cyclic Minimization）2.1…...

编程日记 2025/11/14 23:17:00

模运算核心性质与算法应用：从数学原理到编程实践

目录 &#x1f680;前言&#x1f31f;数学性质&#xff1a;模运算的理论基石&#x1f4af;基本定义&#xff1a;余数的本质&#x1f4af;四则运算规则&#xff1a;保持同余性的关键 &#x1f99c;编程实践&#xff1a;模运算的工程化技巧&#x1f4af;避免数值溢出&#xff1a;…...

编程日记 2025/12/5 4:53:59

MINIQMT学习课程Day8

获取qmt账号的资金账号后&#xff0c;我们进入下一步&#xff0c;如何获得当前账号的持仓情况 还是之前的步骤&#xff0c;打开qmt&#xff0c;选择独立交易&#xff0c; 之后使用pycharm&#xff0c;编写py文件。 from xtquant import xtdata from xtquant.xttrader import…...

编程日记 2026/2/5 12:55:29

【硬件模块】数码管模块

一位数码管 共阳极数码管&#xff1a;8个LED共用一个阳极 数字编码00xC010xF920xA430xB040x9950x9260x8270xF880x8090x90A0x88B0x83C0xC6D0xA1E0x86F0x8E 共阴极数码管&#xff1a;8个LED共用一个阴极 数字编码00x3F10x0620x5B30x4F40x6650x6D60x7D70x0780x7F90x6FA0x77B0x7…...

编程日记 2026/2/1 15:21:34

专为 零基础初学者 设计的最简前端学习路线，聚焦核心内容，避免过度扩展，帮你快速入门并建立信心！

第一阶段&#xff1a;HTML CSS&#xff08;2-3周&#xff09; 目标&#xff1a;能写出静态网页&#xff0c;理解盒子模型和布局。 HTML基础 常用标签&#xff1a;<div>, <p>, <img>, <a>, <ul>, <form> 语义化标签&#xff1a;<head…...

编程日记 2026/2/1 13:52:35

详解大模型四类漏洞

关键词&#xff1a;大模型&#xff0c;大模型安全&#xff0c;漏洞研究 1. 引入 promptfoo&#xff08;参考1&#xff09;是一款开源大语言模型&#xff08;LLM&#xff09;测试工具&#xff0c;能对 LLM 应用进行全面漏洞测试&#xff0c;它可检测包括安全风险、法律风险在内…...

编程日记 2026/2/2 13:48:11