关于javascript:防抖和节流

4次阅读

共计 1729 个字符，预计需要花费 5 分钟才能阅读完成。

防抖（Debounce）是指在肯定工夫内，当函数被频繁触发时，只有在最初一次触发后的延迟时间内，函数才会被真正执行。如果在延迟时间内又有触发事件产生，会从新开始计时。

简洁的讲就是：n 秒后执行该事件，在 n 秒内被反复触发，则从新计时。

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        #btn {
            width: 100px;
            height: 40px;
            margin: 40px;
            background-color: aqua;
            cursor: pointer;
            border: solid 2px #000;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div>
        <button type="button" id="btn"> 点击我 </button>
    </div>
    <script type="text/javascript">
        // 获取 按钮
        let btn = document.querySelector('#btn');

        //“点击我”的办法
        function palyClick() {// console.log(this);
            console.log('哈哈哈，我被你点击了');
        }

        // 封装防抖函数
        // func: 点击按钮要执行的函数
        // delay: 延迟时间
        function debounce(func, delay) {
            // 设置定时器标识
            let timer = null;
            // 留神这里不能应用箭头函数 否则会扭转 this 的指向
            return function () {
                let _this = this;
                // 革除 timer 延时办法
                if (timer !== null) {
                    // 革除定时器
                    clearTimeout(timer);
                }

                // 设置定时器
                timer = setTimeout(() => {func.apply(_this);
                    timer = null;
                }, delay)
            }
        }

        // 给按钮增加 d 点击事件监听 点击时，执行 debounce 函数，延时工夫为 1000 
        btn.addEventListener('click', debounce(palyClick, 2000));
    </script>
</body>
</html>

成果视频：

节流（Throttle）是指在肯定工夫内，无论函数被触发多少次，函数只会在固定的工夫距离内执行一次。如果在工夫距离内有屡次触发事件，只会执行最初一次。

简洁的讲就是：n 秒内只运行一次，在 n 秒内反复被触发，只有最初一次是失效。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #btn {
            width: 100px;
            height: 40px;
            margin: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button id="btn"> 触发按钮 </button>
    <script>
        // 获取 按钮
        const btn = document.getElementById("btn");

        //“触发按钮”的办法
        function playClick() {console.log("节流办法曾经触发");
        }

        // 封装节流函数
        function Throttle(Fun, time) {
            let flag = false
            return function () {
                // 首次执行办法，flag 置为 true
                if (!flag) {Fun();
                    flag = true;
                }

                // 当定时器中回调函数执行完，将 flag 置为 false 时，才会从新执行办法语句
                setTimeout(() => {flag = false;}, time)
            }
        };

        btn.onclick = Throttle(playClick, 3000);
    </script>
</body>
</html>

成果视频：

正文完