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

前端页面鼠标移动监控（鼠标运动、鼠标监控）鼠标防抖处理、mousemove、debounce()、事件停止触发、超时触发

news 2025/7/11 6:05:58

文章目录

    • 代码
    • 使用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. 利用防抖实现性能优化
        // 需求: 鼠标在盒子上移动，里面的数字就会变化 +1
        const 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>

在这里插入图片描述

http://www.dtcms.com/a/112328.html

相关文章：

  • 博途之S7通讯
  • 仿小红书社交源码+及时通讯聊天软件APP源码
  • Springboot面试篇
  • 三维扫描助力文化遗产数字化保护
  • [特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
  • 【调研】YOLO算法在FPGA/ZYNQ上的部署与加速
  • 文化算法初探
  • 决策树实战：用Python实现智能分类与预测
  • DE2-115分秒计数器
  • 基于javaweb的SpringBoot图片管理系统图片相册系统设计与实现(源码+文档+部署讲解）
  • 基于javaweb的SSM酒吧后台管理系统设计与实现(源码+文档+部署讲解）
  • 【棒垒球规则】全国幼儿软式棒垒球比赛规则（二）·棒球1号位
  • java流程控制04：if选择结构
  • Python 元组
  • deepseek v3-0324 Markdown 编辑器 HTML
  • uniapp的v-for不显示或者swiper-item的不显示
  • LabVIEW面向对象编程设计方法
  • Git Rebase 操作中丢失提交的恢复方法
  • 目前来讲 有哪些三维重建算法，哪个算法效果好
  • 【QT】获取文件路径中的文件名，去掉后缀，然后提取文件名中的数字
  • 判断HiveQL语句为ALTER TABLE语句的识别函数
  • Hyperlane：高性能 Rust HTTP 服务器框架评测
  • 第一期第9讲21：50
  • 洛谷题单3-P1420 最长连号-python-流程图重构
  • 从上帝视角看函数
  • Opencv计算机视觉编程攻略-第九节 描述和匹配兴趣点
  • vue进度条组件
  • Vue3引入ElementPlus
  • SpringCloud第二篇：注册中心Eureka
  • 二叉树 树 - 问题集合