防抖（附案例）起性能优化作用

learn 11233466

已于 2023-11-27 10:54:23 修改

阅读量105

点赞数

文章标签： javascript 开发语言 ecmascript

于 2023-06-02 21:12:40 首次发布

本文链接：https://blog.csdn.net/weixin_52005267/article/details/131011313

版权

1、lodash库实现防抖
需求：鼠标在盒子上移动，里面数字+1
在这里插入图片描述
鼠标停止前最后一刻移动即为上一次调用，故鼠标停止后过500ms，调用func
鼠标一直移动的话，则一直调用debounced函数

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="lodash.min.js"></script>
    <!-- 引入lodash文件 文件内容将加载到这里 -->
    <script>
        const div = document.querySelector('.box')
        let i = 1

        function mouseMove() {
            div.innerHTML = i++
        }
        // 以前事件监听的第二个参数 函数后面不加小括号 但debounce要加 因为要往里面传递参数
        // box.addEventListener('mousemove', mouseMove)
        div.addEventListener('mousemove', _.debounce(mouseMove, 500))

    </script>
</body>

</html>

2、手写防抖函数
需求：鼠标在盒子上移动，鼠标停止 500ms后，数字才+1
请添加图片描述
鼠标移动事件：
在这里插入图片描述

<script>
        const div = document.querySelector('.box')
        let i = 1

        function mouseMove() {
            div.innerHTML = i++
        }


        function bounced(fun, time) {
            let timeId
            // 返回一个匿名函数
            return function () {
                if (timeId) clearTimeout(timeId)
                //局部作用域
                timeId = setTimeout(fun, time)
            }
        }
        // 以前事件监听的第二个参数 函数后面不加小括号 但debounce要加 因为要往里面传递参数
        // box.addEventListener('mousemove', mouseMove)
        // div.addEventListener('mousemove', _.debounce(mouseMove, 500))
        div.addEventListener('mousemove', bounced(mouseMove, 500))

    </script>

函数后面加小括号，会立刻调用（页面一打开就执行，返回一个匿名函数。相当于鼠标一滑动就执行那个匿名函数。

learn 11233466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
防抖（附案例）起性能优化作用

鼠标停止前最后一刻移动即为上一次调用，故鼠标停止后过500ms，调用func。需求：鼠标在盒子上移动，鼠标停止 500ms后，数字才+1。鼠标一直移动的话，则一直调用debounced函数。需求：鼠标在盒子上移动，里面数字+1。1、lodash库实现防抖。
复制链接

扫一扫