js事件节流和防抖

1、节流（throttle）

原理：

事件触发后，在指定时间内不会再触发，等到达这个指定时间后会再触发。
简言之，就是让事件按一定的频率来触发，从而大大减少触发次数。

应用场景：

窗口的 resize 事件，在改变浏览器窗口大小的过程中，resize是会不断执行的，频率非常之高，
这时候就可以运用节流来控制resize事件的触发。

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

2、防抖（debounce）

原理：

多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

应用场景：

点击某个操作按钮向服务器发送操作请求，为了避免重复发起请求，
可以用防抖来控制只向服务器请求一次

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