14 # 手写 debounce 防抖方法

news2024/10/7 4:24:11

什么是防抖

防抖: n 秒后再去执行该事件，若在 n 秒内被重复触发，则重新计时，这个效果跟英雄联盟里的回城技能差不多。

本质上是优化高频率执行代码的一种手段，目的就是降低回调执行频率、节省计算资源。

应用场景：

搜索框搜索输入，手机号、邮箱等验证输入检测，只需用户最后一次输入完，再发送请求
窗口大小 resize，只需窗口调整完成后，计算窗口大小，防止重复渲染。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>防抖</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
    </head>
    <body>
        <div>
            普通输入框：
            <input class="input1" />
        </div>
        <div>
            防抖输入框：
            <input class="input2" />
        </div>
        <script>
            // 普通
            const inputEl1 = document.querySelector(".input1");
            let counter1 = 1;
            inputEl1.oninput = function () {
                console.log(`发送网络请求${counter1++}`, this.value);
            };
            // 防抖处理过的
            const inputEl2 = document.querySelector(".input2");
            let counter2 = 1;
            inputEl2.oninput = _.debounce(function () {
                console.log(`防抖处理：发送网络请求${counter2++}`, this.value);
            }, 1000);
        </script>
    </body>
</html>

在这里插入图片描述

手写 debounce

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>手写防抖</title>
    <script>
        function kaimoDebounce(fn, delay) {
            let timer = null;
            let _debounce = function (...args) {
                // 清除上一次定时器
                clearTimeout(timer);
                // 开启新的一个定时器
                timer = setTimeout(() => {
                    // this 和参数绑定
                    fn.apply(this, args);
                    // 函数执行完之后，将timer置为null
                    timer = null;
                }, delay);
            };
            return _debounce;
        }
    </script>
</head>

<body>
    <div>
        防抖输入框：
        <input class="input" />
    </div>
    <script>
        const inputEl = document.querySelector(".input");
        let counter = 1;
        inputEl.oninput = kaimoDebounce(function (e) {
            console.log(`手写防抖：发送网络请求${counter++}`, this, this.value);
            console.log(e);
        }, 1000);
    </script>
</body>

</html>