防抖和节流

防抖

防抖函数: 短时间内大量触发同一个函数，只会执行一次。实现原理是设置一个定时器，在约定时间后再触发事件处理，每次触发事件都会重置计时器，直到约定时间内没有第二次操作才会执行。
防抖函数常用于搜索框/滚动条的监听事件处理。如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费。

/**
  fn 目标函数
  wait 间隔时间
  immediate 是否立即执行
*/
 const debounce = (fn,awit,immediate) => {
  let timer;
  return (...arg)=>{
      if(timer){
        clearTimeout(timer)
      }
      // timer 为空表示首次触发
      if (immediate && !timer) {
          fn(...arg)
          immediate = false
          return
      }
      timer = setTimeout(()=>{
        fn(...arg)
      },wait)
  }
}

节流

节流函数: 短时间内大量出发同一个函数，约定时间内只会执行一次，到达约定时间以后才会再次执行，即每隔一段时间才会执行一次。实现原理是设置一个定时器，约定时间后执行事件，如果时间到了，那么执行函数并重置定时器。

const throttle = (fn,awit) => {
  let timer;
  return (...arg)=>{
      if(timer){
       return;
      }
      timer = setTimeout(()=>{
        fn(...arg);
        timer = null;
      },wait)
  }
}