防抖是什么？js怎么实现防抖和节流？

小粗腿Cc

已于 2022-05-05 08:30:47 修改

阅读量974

点赞数 2

文章标签： vscode 前端 javascript html5

于 2022-03-30 10:44:16 首次发布

本文链接：https://blog.csdn.net/weixin_45249263/article/details/123839147

版权

为什么需要用到防抖呢？

我们知道：短时间内高频率地触发事件，可能会导致不良后果。

具体到我们开发界来说，如果数据一直处于一种高频率更新的状态，那么可能会引发的问题如下：

前后端数据交互频率过高，导致流量浪费。
界面高频率渲染更新，引发页面延迟、卡顿或假死等状况，影响体验。

在进入正题之前，我们先来看下面这个例子：

<!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>用前端JS来实现【防抖】</title>
</head>

<body>
    <!-- HTML -->
    <form action="" class="example-form">
        <div>
            <label for="name">名称</label>
            <input type="text" name="name" id="name" placeholder="please input your name">
        </div>
        <div>
            <label for="res">输入</label>
            <textarea type="multipart" name="res" id="res" placeholder="这里是每一次输入的结果"></textarea>
        </div>
    </form>

    <!-- JavaScript -->
    <script>
        window.onload = () => {
            const inputEle = document.querySelector("#name");
            const resEle = document.querySelector("#res");
            inputEle.addEventListener("input", function (event) {
                console.log(this.value);
                resEle.value += `\n${ this.value }`
            });
        }
    </script>
</body>

</html>

在输入框的 input 事件中，将该输入框的当前值输出在多行文本框中。可以看到，每输入一个拼音字母，都会有一条输出记录，触发频率取决于人的打字速度。

那么在正餐前，我们再上一个简单的【防抖】小例子

即当用户狂点按钮时，系统只会在用户停止点击事件后并等待特定时间后再执行操作——防抖

<!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>02防抖JS版</title>
</head>

<body>
    <button id="btn">点我点我</button>

    <script>
        const btn = document.querySelector("#btn")

        let timer = null
        btn.addEventListener(
            'click',
            () => {

                if (timer) {
                    clearTimeout(timer)
                    timer = null
                }

                timer = setTimeout(
                    function () {
                        console.log("123456");
                    }, 500
                )
            }
        )
    </script>

</body>

</html>

接下进入正戏：

新需求

假如，现在有这么一个新需求，要我们在 input 事件中加入新的逻辑：将输入框的当前值发往后台进行存储。

可以想象，这种情况下的前后端交互频率该有多高，其中很多数据都是没有必要即刻发送保存的，纯属浪费流量。

我们可以考虑对这个需求进行一下优化，只要控制一下交互频率就好，主要有以下两个方向：

每隔几秒发送一次数据 —— 节流
每当用户停止输入之后，开始计时，一定时间后发送一次数据 —— 防抖

实现防抖

首先，我们从防抖的方向进行实现：只有当用户停止输入一段时间后，才会将输入内容输出在多行文本框中。（html代码同最上面的一样，javas不一样）

window.onload = () => {
    const resEle = document.querySelector("#res");
    function changeOutputVal(value) {
        resEle.value += `\n${ value }`;
    }

    function debounce(fn, delay = 1000) {
        let timer = null;
        return function (...args) {
            console.log(args);
            if (timer) {
                clearTimeout(timer);
                timer = null;
            }

            timer = setTimeout(() => {
                fn.apply(this, args);
            }, delay);
        }
    }

    const outputRes = debounce(changeOutputVal, 1000);

    const inputEle = document.querySelector("#name");

    inputEle.addEventListener("input", (eve) => {
        outputRes(eve.target.value);
    });
}

代码说明：