防抖 & 节流

防抖

什么是防抖?

• 当事件触发时，相应的函数不会被立即触发，而是会被推迟执行
• 当事件被频繁触发的时候，函数的触发延迟一段时间
• 简而言之，防抖就是将函数的执行延迟一定时间，如果在该时间内重新触发事件，那么延迟的时间会重置，只有真正达到延迟时间，才会执行回调函数
• 举个例子：游戏中的回城就可以认为是防抖，在回城的读秒过程中，如果再次执行回城操作，那么会重新进行读秒，只有整个读秒过程都没有再次执行回城操作，那么等到读秒结束才能成功回城

场景

• 输入框频繁输入内容，搜索或者提交信息
• 频繁点击按钮，触发某个事件
• 监听浏览器滚动事件
• 监听用户缩放浏览器resize事件

实现防抖函数

function debounce(fn,delay = 300){
  let timer = null
  return function(...arg){
    //第一次点击的时候timer是不存在的
    //第二次点击的时候timer已经又值了,这时候我们就需要清空这个定时器,不让它触发出来
    if(timer){
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      fn.apply(this,arg)
    }, delay);
  }
}

节流

什么是节流?

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

代码实现

function throttle(fn,daley=300) {
  let last = 0
  return function (...args) {
    const now = Date.now()
    if(now - last > daley){//对比一下上次触发函数的时间 和本次触发的间隔 有没有超过规定的时间戳
      last = now
      fn.apply(this,args)
    }
  }
}