【防抖和节流】

防抖和节流是一种性能优化。

开发过程中，我们需要绑定一些持续触发的事件，如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。

所以我们并不希望事件持续触发的过程中频繁的执行函数，防抖和节流就可以解决这种问题。

1.防抖（debounce）

设定一个延迟周期；
触发事件后，等待一个周期在执行；
如果期间又被触发，则重新计算周期；
直到周期结束，执行动作；

以事件触发和周期为指向
监听一个输入框，文字变化后触发change事件；
添加防抖后：用户输入结束或者暂停，延迟周期后，才会触发change事件；

/*
* 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) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}
// 使用防抖
   debounce(() => {
     console.log(1111)
   }, 600)

2.节流（throttle）

设定一个延迟周期；
触发事件后等待一个周期在执行；
若期间再次触发事件，不执行；
等待周期结束后，在执行；

只看周期，不看触发
拖拽一个元素时，随时打印被拖拽的位置；
直接用drag会频繁触发，很容易导致卡顿；
节流：无论拖拽速度多快，都会每隔一段时间触发一次；
添加节流：
// 节流

function throttle(fn, delay = 100) {
  let timer = null
  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}
// 使用节流
  throttle(function () {
    console.log(22222)
  }, 1000)

3.总结

防抖、节流也是闭包使用的常举案例；
闭包介绍