防抖和节流

防抖

为什么需要防抖? 当函数绑定一些持续触发的事件如：resize、scroll、mousemove ，键盘输入，多次快速click等等， 如果每次触发都要执行一次函数，会带来性能下降，资源请求太频繁等问题

非立即执行版本:

//防抖
const debounce = <TArgs extends any>(fn: (args: TArgs) => void, wait: number) => {
  let timer: NodeJS.Timeout | null = null
  return (args: TArgs) => {
    //如果存在
    //清除之前的定时器
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      console.log(args);
      fn(args)
    }, wait)
  }
}

立即执行版本:

function debounce(fn,wait,immediate=false)
{
  let timer=null
  let isImmediateInvoke =false
  retrun (...args)=>{
      if(timer)clearTimeout(timer)
      //这里在执行一次
      if(!isImmediateInvoke&&immediate)
      {
        fn,apply(this,args)
        isImmediateInvoke=true
      }

      timer=setTimeout(()=>{
        fn,apply(this,args)
      },wait)
  }
}

节流

节流是指当事件触发时，会执行这个事件的响应函数。 但是该事件如果被频繁触发，那么节流函数会按照一定的频率来执行函数。 节流类似于技能cd，不管你按了多少次，必须等到cd结束后才能释放技能。也就是说在如果在cd时间段，不管你触发了几次事件，只会执行一次。只有当下一次cd转换，才会再次执行。

const throttle = <TArgs extends any>(fn: (args: TArgs) => void, wait: number) => {
  let timer: NodeJS.Timeout | null = null
  return (args: TArgs) => {
    if (!timer) {
      timer = setTimeout(() => {
        fn(args)
        timer = null
      }, wait)
    }
  }
}