js 防抖和节流

节流

简单讲就是尽管你非常频繁的触发事件，但是单位时间内我只会执行一次。

比如窗口的 resize 事件，在拖动浏览器窗口的过程中，resize是会不断执行的，
频率非常之高，简直令人发指。

所以很有必要做一个节流，让事件按照一定的频率来执行，从而大大减少执行次数。

function throttle(fn, wait=500){
  let last = 0
  return function (){
    let now = Date.now()
    if(now - last > wait){
      fn.apply(this, arguments)
      last = now
    }
  }
}

防抖

简单说，就是不管你频繁的触发多少次，我只执行一次。

function debounce(fn, wait=500){
  let timer = null
  return function (){
    let now = !timer
    timer && clearTimeout(timer)
    timer = setTimeout(()=>{
      timer = null
    }, wait)
    if(now){
      fn.apply(this, arguments)
    }
  }
}

对比

防抖和节流的不同点在于，防抖让事件自始至终只会执行一次，
即便你不断的触发，事件只会在你最后一次触发后执行

而节流，不只是触发一次，而是单位时间内只触发一次，比方，设置为每两秒执行一次，你在60秒内触发了60次，事件只会执行30次。