防抖和节流

防抖和节流严格意义上是属于性能优化方面的知识，接下来使用实际应用场景详细解释防抖和节流。

案例：
在滚动条滚动到距离顶部一定距离的时候，会出现一个返回顶部的标识。点击就会执行回到顶部的方法。

在这个案例中就会用到监听浏览器滚轮事件，事件不停的返回距离顶部的距离，那么我们可以直接写：

  function showTop  () {
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
              console.log('滚动条位置：' + scrollTop);           
     }
  window.onscroll  = showTop

这里我们就会发现一个问题，这个函数的默认执行频率太高了，浏览器的性能不应该消耗在这里。

防抖(debounce)

针对这个案例以及场景，提出第一个思路：
我们在第一次执行这个事件时给一个期限，比如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) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

简化：

/*****************************简化后的分割线 ******************************/
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) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

• 对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。

节流(throttle)

• 如果在限定时间段内，不断触发滚动事件（比如某个用户闲着无聊，按住滚动条不断的拖来拖去），只要不停止触发，理论上就永远不会输出当前距离顶部的距离。
  但是如果产品同学的期望处理方案是：即使用户不断拖动滚动条，也能在某个时间间隔之后给出反馈呢？（此处暂且不论哪种方案更合适，既然产品爸爸说话了我们就先考虑怎么实现）

方案：
我们可以设计一个类似控制阀门的开关，在限定时间内只执行一次，然后不再工作(就像技能冷却) 等过了这段时间再重新激活。

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

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的时间间隔，持续输出当前位置和顶部的距离

其他应用场景举例

1.搜索框的input事件，我们就可以使用节流方案，防止输入内容不断的去请求，（间隔一段时间就必须查询相关内容或者设置输入间隔大于某个值【500ms】，就当做用户已经输入完成。
2.页面resize事件，常用于做页面的适配，需要根据最终呈现的页面情况做dome渲染，此时我们可以使用防抖方案，因为只需要判断最后一次变化情况。

----------------------------原文：https://segmentfault.com/a/1190000018428170-------------------------

个人项目经历：
vue 的项目有一个需求，导航有一个钉子效果

• 当钉子开启的时候，导航就固定定位到顶部，
• 当钉子关闭的时候，滚动条滑动到大于导航高度时 鼠标经过顶部就出现导航条，移开则隐藏。
  以上效果正常写完有个问题，就是判断导航高度的时候精度判断不准确，会导致一些页面滑动时出现抖动闪烁的问题，还有因为vue是单页面应用，这个效果是全局的，性能消耗大，还会和其他页面的原生事件起冲突，这时候使用防抖，节流可以解决这个问题,最终的效果是滚动条滚动停止才触发事件。