防抖和节流防抖和节流防抖是在操作过程中, 当操作停止时才会进行下一步, 注重的是结果. 节流是在操作过程中, 按照一定

防抖和节流

防抖是在操作过程中, 当操作停止时才会进行下一步, 注重的是结果, 例如输入框模糊匹配, 在输入停止后才调用接口
节流是在操作过程中, 按照一定的频率进行操作,注重的是过程例如拖动元素时会按照设计的节奏一个一个的进行实现

实现防抖

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>防抖</title>
    </head>
    <body>
        <h2>不使用防抖</h2>
        搜索: <input id="input1" />
        <h2>使用防抖</h2>
        搜索: <input id="input2" />

        <script>
            // 防抖
            function debounce(fn, delay = 300) {
                let timer = 0;

                return function () {
                    // 如果存在定时器, 则清零
                    if (timer) clearTimeout(timer);

                    timer = setTimeout(() => {
                        // 绑定this, 绑定额外参数
                        fn.apply(this, arguments);
                        timer = 0;
                    }, delay);
                };
            }

            const input1 = document.getElementById("input1");
            input1.addEventListener(
                "keyup",
                () => {
                    console.log('不使用防抖', input1.value);
                }
            );

            const input2 = document.getElementById("input2");
            input2.addEventListener(
                "keyup",
                debounce(() => {
                    console.log('使用防抖', input2.value);
                })
            );
        </script>
    </body>
</html>

实现效果

实现节流

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>节流</title>
    </head>
    <body>
        <h2>不使用节流</h2>
        <div id="div1" draggable="true" style="width: 100px; height: 100px; background: red"></div>
        <h2>使用节流</h2>
        <div id="div2" draggable="true" style="width: 100px; height: 100px; background: red"></div>

        <script>
            // 节流
            function throttle(fn, delay = 300) {
                let timer = 0;

                return function () {
                    // 如果存在定时器, 则清零
                    if (timer) return;

                    timer = setTimeout(() => {
                        // 绑定this, 绑定额外参数
                        fn.apply(this, arguments);
                        timer = 0;
                    }, delay);
                };
            }

            const div1 = document.getElementById("div1");
            div1.addEventListener(
                "drag",
                (e) => {
                    console.log('不使用节流', e);
                }
            );

            const div2 = document.getElementById("div2");
            div2.addEventListener(
                "drag",
                throttle((e) => {
                    console.log('使用节流',e);
                })
            );
        </script>
    </body>
</html>

实现效果