前言

　　前端踩雷：短时间内重复提交导致数据重复。

　　对于前端大佬来说，防抖和节流的技术应用都是基本操作。对于“兼职”前端开发的来说，这些都是需要躺平的坑。

我们今天就来盘一盘js防抖与节流，并且解决开发中遇到的问题。

PS：重复提交问题我用的是防抖的方法进行避免。

回到顶部

防抖的概念

　　防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

　　前端开发中，常见的事件如，onresize，scroll，mousemove ,mousehover 等会短时间内多次触发（频繁触发），不做限制的话可能一秒执行几百次，

在这些函数内部如果还执行了其他函数，尤其是执行了操作 DOM 的函数的话（浏览器操作 DOM 是很耗费性能的），那不仅会浪费计算机资源，

还会降低程序运行速度，甚至造成浏览器卡死、崩溃。

　　除此之外，短时间内重复调用 ajax 不仅会造成数据关系的混乱，还会造成网络拥堵，增加服务器压力等问题。

回到顶部

防抖代码实现

防抖的关键是需要一个 setTimeout 来辅助实现，延迟运行需要执行的代码。

如果方法多次触发，则把上次记录的延迟执行代码用 clearTimeout 清掉，重新开始计时。

若计时期间事件没有被重新触发，等延迟时间计时完毕，则执行目标代码。

注意：当你一直连续不断的点击超过你设置的时间，并且只有第一次点击有效，这不是bug，这是概念问题，注意看下面标红这部分，

防抖又叫为函数防抖（debounce）：指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('我是防抖，你点击了按钮' + num++)
        }

        // 防抖函数
        const debounce = (fun, wait) => {
            let timeout;
            return function () {
                if (timeout) {
                    clearTimeout(timeout);
                }
                //第一次执行任务，timeout是null，此时callNow是true，需要立即执行
                let callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait);
                if (callNow) {
                    fun.apply(this);
                }
            }
        };
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法（ 1s内只允许一次操作）
        btn.addEventListener('click', debounce(seckill, 1000));  

    </script>

</body>
</html>

回到顶部

节流的概念

　　节流又叫函数节流（throttle）：指当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

回到顶部

节流代码实现

鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断；

节流和防抖都是差不多的，区别在于是“立即执行版” 和 “非立即执行版”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js防抖与节流</title>
</head>
<body>
    <!--按钮-->
    <button id="btn">点击提交</button>

    <script type="text/javascript">

        var num = 1;
        const seckill = () => {
            console.log('点击了按钮' + num++)
        }
        function throttle(callback, delay) {
            var timer, begin = new Date();
            return function () {
                //记录事件触发时的时间
                var current = new Date();
                //清除上一次定时器任务
                clearTimeout(timer);
                //判断距上一次触发是否已过了delay的时间
                if (current - begin >= delay) {
                    callback();
                    begin = current;
                } else {
                    timer = setTimeout(() => {
                        callback();
                    }, delay);
                }
            }
        }
        //点击提交按钮
        let btn = document.getElementById('btn');
        //调用方法（ 1s内只允许一次操作）
        btn.addEventListener('click', throttle(seckill, 1000));

    </script>

</body>
</html>