防抖和节流

https://segmentfault.com/a/1190000018428170

1. 防抖

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

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

效果：如果短时间内大量触发同一事件，只会执行一次函数。

实现：既然前面都提到了计时，那实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现：

function debounce(fn, delay, immediate) {
     let timer = null
     let flag = true
     if (immediate) {
       return () => {
         clearTimeout(timer)
         if (flag) {
           fn()
           flag = false
         }
         timer = setTimeout(() => {
           flag = true
         }, delay)
       }
     } else {
       return () => {
         if (timer) {
           clearTimeout(timer)
           timer = null
         }
         timer = setTimeout(fn, delay)
       }
     }
}

　　

2.节流

继续思考，使用上面的防抖方案来处理问题的结果是：

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

但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？

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

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

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

function throttle(fn, delay, immediate) {
     let flag = true
     let timer = null
     if(immediate){
       return function(){
         if(flag) {
           fn()
           flag = false
           timer = setTimeout(() => {
             flag = true
           }, delay)
         }
       }
     }
     return function(){
       if(flag === true){
         flag = false
         timer = setTimeout(() => {
           fn()
           flag = true
         }, delay)
       }
     }
}

　　

本文描叙都是来自文首网址，觉得生动形象有趣，拉过来方便查阅记忆。