JS中函数的防抖与节流

前言

在JS中，一个事件在短时间内多次触发，不加以节制的话，会对服务器以及浏览器造成极大的负担，所谓的节流防抖简而言之就是限制事件在一定时间内的触发次数。

防抖

防抖的原理：在一定时间事件无论触发多少次，只有最后一次的触发事件会执行。

举个栗子：

 <!-- 创建一个input标签 -->
    <input type="text" id="ipt">
    <script>
        // 获取到这个input
        var ipt = document.getElementById('ipt')
        // 给这个input绑定一个输入事件
        ipt.oninput = function () {
            console.log(ipt.value);
        }
    </script>

此时当我们在input框输入时，控制台会根据输入框内容变化不断打印更新内容，这会对浏览器以及服务器造成负担，

举个实际的例子，当我们在注册页面填写账号密码时，没有人会喜欢一个时时跳出来提醒你输入信息格式错了的页面。

所以，我们可以限制事件的触发次数，以提高用户的体验，也可以降低浏览器的负担。

如下：

<!-- 创建一个input标签 -->
    <input type="text" id="ipt">
    <script>
        // 获取到这个input
        var ipt = document.getElementById('ipt')
        // 给这个input绑定一个输入事件
        var timer;
        //利用定时器，在一秒之后执行，同时在开启下一个定时器之前清除上一个定时器
        ipt.oninput = function () {
            clearTimeout(timer)
            timer = setTimeout(function () {
                console.log(ipt.value);
            }, 1000)
        }

利用定时器，我们可以实现简单的函数防抖，但请记得一定要清除定时器，否则在事件还是会不断触发，只是会延迟一秒。

节流

节流的原理：在一定时间内，无论事件触发多少次，都只会执行一次。

再来个栗子：

<!-- 创建一个div以及button按钮，当我们点击按钮时让div里的内容实现累加 -->
    <div>0</div>
    <button>点击</button>
    <script>
        // 获取到div和button按钮
        var odiv = document.getElementsByTagName('div')[0];
        var btn = document.getElementsByTagName('button')[0];
        // 给按钮绑定点击事件
        btn.onclick = function () {
            // 记得取整，不然是字符串拼接
            odiv.innerHTML = parseInt(odiv.innerHTML) + 1
        }
    </script>

当我们的点击按钮时，div中的数值会不断累加，累加的速度取决于我们的手速。

再来个实际些的例子，当用户点击发送请求时，会向服务器发送网络请求，但是，当有人恶意向服务器多次发送请求呢，这就加重了对服务器的负担，所以我们可以限制用户一段时间内的请求次数，来防止有人恶意发送请求。

怎么做呢？

我们可以判断用户发送请求的时间间隔，距离下一次发送请求时间个了多久，判断是否超过规定时间，超过规定时间则允许请求，否则无效。

如下：

<!-- 创建一个div以及button按钮，当我们点击按钮时让div里的内容实现累加 -->
    <div>0</div>
    <button>点击</button>
    <script>
        // 获取到div和button按钮
        var odiv = document.getElementsByTagName('div')[0];
        var btn = document.getElementsByTagName('button')[0];
        // 创建一个变量以记录上一次点击的时间 
        // 第一次点击时没有上一次的时间
        // 初始化上一次点击时间为0
        var lastTime = 0;
        // 给按钮绑定点击事件
        btn.onclick = function () {
            // 记录当前点击时间
            var nowTime = new Date().getTime();
            // 将当前点击时间与上一次点击时间进行比较
            // 超过规定时间则执行
            // 假设规定时间为1s
            // 即当前点击时间-上一次点击时间>1s则执行
            if (nowTime - lastTime > 1000) {
                // 同样进行数据转化，不然是字符串拼接
                odiv.innerHTML = parseInt(odiv.innerHTML) + 1
                // 将当前时间赋值为上一次点击时间，用以下次判断
                lastTime = nowTime
            }
        }
    </script>

当我们每次收到点击请求时，都与上次时间进行比较判断，超过规定时间再执行代码，以达到函数节流的目的。