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

文章目录

代码

html 复制代码
<!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函数做防抖处理(只有鼠标移动停止并超过一定时间,才会触发)

html 复制代码
<!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>

手写防抖函数

html 复制代码
// 手写防抖函数
// 核心是利用 setTimeout定时器来实现
// 1.声明定时器变量
// 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,如果有先清除以前的定时器
// 3.如果没有定时器,则开启定时器,存入到定时器变量里面
// 4.定时器里面写函数调用

写法1

html 复制代码
<!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监听函数的第二个参数接收的是一个函数,需要构造一个匿名返回函数)

html 复制代码
<!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>
相关推荐
dy17173 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂7 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技7 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
attitude.x8 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java8 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
方圆工作室8 小时前
Arduino音乐键盘程序
单片机·嵌入式硬件·计算机外设