手写防抖动函数

柳职贾克斯

已于 2023-06-01 16:20:46 修改

阅读量127

点赞数 1

文章标签： javascript 开发语言

于 2023-06-01 16:18:41 首次发布

本文链接：https://blog.csdn.net/qq_45083152/article/details/130989664

版权

需求：

通过鼠标在盒子上移动，里面的数字自增，并且不让它执行多次

防抖动：

单位时间内，频繁触发事件，只执行最后一次

通过闭包函数实现防抖动

闭包函数：

内嵌函数可以访问定义在外层函数的所有变量和函数，并包括器外层函数能访问的所有变量和函数。

实现思路：

在绑定事件函数中，因为debounce函数是需要传递参数，所以会直接执行并不会等鼠标在盒子内移动时才会执行。

但通过debounce的内嵌函数（闭包函数），我们就可以得到debouce内定义的所有变量及debouce能访问到的所有变量和函数，并且通过return把内嵌函数返回去，那么当鼠标移入盒子时真正调用的事件函数其实是闭包函数。

实现过程：

定义定时器变量
每次鼠标在盒子移动时判断是否有定时器，因为延迟定时器只会执行一次，所以要把之前的清除掉。
定义延时定时器，在延时定时器中调用mousemove函数，并将timer定时器变量赋值为undefined

<head>
    <style>
        div {
            background-color: azure;
            width: 300px;
            height: 300px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector("div")
        let i = 1
        div.innerHTML = i

        function mousemove() {
            i++;
            div.innerHTML = i
        }

        // lodash
        // div.addEventListener("mousemove", _.debounce(mousemove, [500]))

        // 防抖函数
        function debounce(fn, time) {
            let timer;

            //闭包函数
            return function () {
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(() => {
                    fn()
                    timer = undefined;
                }, time)
            }
        }
         //绑定事件及事件函数
        div.addEventListener("mousemove", debounce(mousemove, 500))
    </script>
</body>