节流

节流就是「技能冷却中」

比如为了防止用户频繁点击按钮

const throttle = (fn, time) => {
  let 冷却中 = false
  return (...args) => {
    if(冷却中) return
    fn.call(undefined, ...args)
    冷却中 = true
    setTimeout(()=>{
      冷却中 = false
    }, time)
  }
}

还有一个版本是在冷却结束时调用 fn

简洁版，删掉冷却中变量，直接使用 timer 代替

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

使用方法：

const f = throttle(()=>{console.log('hi')}, 3000)
f() // 打印 hi
f() // 技能冷却中

防抖

防抖就是「回城被打断」

用户频繁进行某项操作，但是你想在操作结束之后实现某个效果之时。

窗口拖动操作，拖动停止后实现某个效果就会用到防抖

const debounce = (fn, time) => {
  let 回城计时器 = null
  return (...args)=>{
    if(回城计时器 !== null) {
      clearTimeout(回城计时器) // 打断回城
    }
    
    // 重新回城
    回城计时器 = setTimeout(()=>{
      fn.call(undefined, ...args) // 回城后调用 fn
      回城计时器 = null
    }, time)
  }
}