浅谈js的防抖和节流

我们工作中遇到防抖和节流的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

防抖

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

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

效果：如果短时间内大量触发同一事件，只会执行一次函数。
实现：既然前面都提到了计时，那实现的关键就在于 setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn,delay){
    let timer = null ;
    return function (){
        if(timer){
            clearTimeout(timer);
        }
        timer=setTimeout(fn,delay);
    }
} 

到这里，已经把防抖实现了，现在给出定义：
对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的delay毫秒）内，事件处理函数只执行一次。

节流

防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

通俗点说就是我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。

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

**实现 **：这里借助 setTimeout来做一个简单的实现，加上一个状态位 valid来表示当前函数是否处于工作状态：

/*
* fn [function] 需要节流的函数
* delay [number] 毫秒，节流期限值
*/
function throttle(fn,delay){
    let valid = true;
    return function(){
        if(!valid){
            return false;
        }
        valid = false;
        setTimeout(function(){
            fn();
            valid = true;
        },delay)
    }
}

运行以上代码的结果是：如果一直调用函数，那么会以1s的时间间隔，持续输出fn()。

总结：
上述内容基于防抖和节流的核心思路设计了简单的实现，文中并没有考虑上下文环境（也就是this指向），实际操作中可以考虑用apply和bind。