JS节流和防抖的区分和实现详解

前言：

在前端开发的过程中，会有很多场景会频繁触发事件，比如说搜索框实时发请求，onmousemove, resize, onscroll等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。，咋办呢？这时候就应该用到函数防抖和函数节流了！

1. 概念

防抖是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次，比如说用手指一直按住一个弹簧，它将不会弹起直到你松手为止。

节流是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是人的眨眼睛，就是一定时间内眨一次。

2. 作用

节流（throttle）与防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

3. 区别

防抖: 任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行；

节流: 指定时间间隔内只会执行一次任务；

4. 原理

函数节流与函数防抖巧妙地使用 setTimeout 来存放待执行的函数，这样可以很方便的利用 clearTimeout 在合适的时机来清除待执行的函数。

5.应用场景

函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语。

6. 🌰 栗子🌰

防抖：

场景描述：第一次触发事件时，不立即执行函数，而是给出一个期限值，比如500ms，然后：

如果在500ms内没有再次触发滚动事件，那么就执行函数
如果在500ms内再次触发滚动事件，那么当前的计时取消，重新开始计时

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null 
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

简化上述写法：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay)
    }
}

// 需要防抖的函数
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

此时会发现，必须在停止滚动1秒以后，才会打印出滚动条位置。

总结：防抖就是在任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行。

使用上面的防抖方案来处理问题的结果是：

如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。

所以下面咱们来谈谈节流；

节流：

场景描述：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈，该怎么做呢？

其实很简单：我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于英雄联盟里技能冷却时间）。

效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

/*
* fn [function] 需要节流的函数
* delay [number] 毫秒，防抖期限值
*/

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 请注意，节流函数并不止上面这种实现方案,
   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
    */

// 需要节流的函数
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)

运行以上代码的结果是：

如果一直拖着滚动条进行滚动，那么会以1s的时间间隔，持续输出当前位置和顶部的距离。

具体运用到什么场景现在应该清除了吧，这也是根据需求来确定的哦！！！大家加油

这里也可以详细看一下这位大神的总结：函数防抖和节流 - 简书

前言：