手写节流防抖

最近看了篇博客，说了下节流和防抖，我觉得写得不错，于是结合自己的理解再梳理下

很多人都被一些名词吓到了，其实用一些生活中的模型类比一下就很好理解，我们拿 LOL 来类比

• throttle 节流 这个可以类比游戏中的技能 cd，剑圣 R 完后需要过一会才能继续施放R技能，技能冷却之前召唤师无法再次触发该技能。那么这个应用到工作中是什么场景呢

比如页面中有个表单提交按钮，部分用户可能因为网络延迟喜欢在狂点按钮，以缓解等待的焦虑，但是我们希望用户只提交一次，避免短时间内重复点击，那这个场景和上面是不是很像呢，就是把这个按钮换成了R技能的按钮

下面是实现代码

const throttle = (fn, time) => {
  let timer = null
  return (...args) => {
    if (timer) { return }
    fn.call(undefined, ...args)
    timer = setTimeout(() => {
      timer = null
    }, time);
  }
}


const handleR = throttle(() => { console.log('开大成功') }, 1000)
handleR()
handleR()
handleR()

• debounce 防抖 这个可以类比游戏中的回城，如果在回城的过程中我们被小兵打断了，那得重新按 B 键回城，只有在这段时间没有被打断的情况下才能完成回城。那么这个应用到工作中是什么场景呢

比如用户在缩放页面大小的时候我们可能需要重新布局定位，我们为了节省性能，可以等用户结束缩放页面一段时间后再去重新定位

下面是实现代码

const debounce = (fn, time) => {
  let timer = null
  return (...args) => {
    if (timer) { window.clearTimeout(timer) }
    timer = setTimeout(() => {
      fn.call(undefined, ...args)
      timer = null
    }, time);
  }
}


const backHome = debounce(() => { console.log('回到泉水了') }, 1000)
backHome()
backHome()
backHome()