手写节流 throttle 、防抖 debounce

节流 throttle

// 节流就是 技能冷却中
const throttle = (fn,time) => {
  let 冷却中 = false
  return (...args) => {
    if(冷却中) return
    fn.call(undefined, ...args)
    冷却中 = true
    setTimeout(()=>{
      冷却中 = false
    },time)
  }
}

// 还有一个版本是在冷却结束时调用 fn
// 简洁版，删掉冷却中变量，直接使用 timer 代替
const throttle = (fn,time) => {
  let timer = null
  return (...args) => {
    if(timer) return 
    fn.call(undefined, ...args)
    timer = setTimeout(()=>{
     timer = null
    },time)
  }
}

场景

例子：一个按钮在一定时间内只能点一次

防抖 debounce

// 防抖就是 回城被打断
const debounce = (fn,time) => {
  let 回城计时器 = null
  return (..args) => {
    if(回城倒计时 !== null){
      clearTimeout(回城倒计时) // 打断回城
    }
    // 重新回城
    回城倒计时 = setTimeout(()=>{
      fn.call(undefined,...args)
      回城倒计时 = null
    }，time)
  }
}

场景

例子：拖动页面窗口，改变页面大小，拖动时，页面内容不会随窗口大小发生改变，在停止拖动时，内容发生改变。