前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标防抖处理、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>
相关推荐
工一木子24 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim5 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron