js实现一个简单的节流操作

1、关于节流

节流就是用来控制某个函数在一定时间内触发次数，为了减少触发频率，以便提高性能或避免资源浪费。举个例子，我们经常会在网卡的时候一直点击请求加载某个页面或资源，这时候其实连续点击很多次其实也是没有效果。

2、简单分析

根据上面这个例子，我们就可以得到节流需要达到的目标：也就是说当我们在某个时间间隔内连续点击是没有效果的，当超过了这个时间点击才有效果，从而大大减少了请求触发的次数，从而达到了“节流”的目标。

3 代码实现

这里以一个简单的点击事件的节流为例子，实现的效果为一秒内连续点击不触发函数，超过点击一秒才触发。

<script>
        let d = document.querySelector("div");  //声明并绑定一个用来点击的元素
        function fn1() {
            console.log("没节流");
        }
         //节流函数
        function throttle(fn, delay) {  

            var timer = null;
            return function () {  //回调函数：如果一秒内连续点击那么就会清空计时器，重新计时
                if (timer != null) {
                    console.log("节流中");
                    clearInterval(timer);
                }

                timer = setInterval(fn, delay);

            }
        }
        d.addEventListener("click",throttle(fn1,1000));  //绑定一个点击事件
    </script>