『手写系列』节流和防抖

节流和防抖都是通过 setTimeout 实现的，目的都是为了降低回调函数执行频率，节计算资源。节流类似于『技能冷却中』，设定时间内回调函数只能执行一次；而防抖类似于『回城被打断』，设定时间内再次调用函数会打断上一次调用，并重置时间，意思是只有最后一次调用才是有效的。

1、节流示例代码

const throttle = (fn,time)=>{
  let timer = null
  return (...args)=>{
    if(timer) return
    fn()  // fn.call(undefined,...args)
    // 技能冷却中
    timer = setTimeout(()=>{
      timer = null
    },time)
  }
}

const f = throttle(()=>{console.log('hi'},3000)
f() // 直接打印出 hi
f() // 3 s 内再次调用无效，即『技能冷却中』。

2、防抖示例代码

const debounce = (fn,time)=>{
  let timer = null
  return (...args)=>{
    // 回城被打断
    if(timer){clearTimeout(timer)}
    // 回城或再次回城
    timer = setTimeout(()=>{
      fn()
      timer = null
    },time)
  }
}

const f = throttle(()=>{console.log('hi'},3000)
f() // 3s 后打印出 hi
f() // 3 s 内再次调用，上一次调用会被打断，时间也重置，即『回城被打断』。（只有最后一次调用才是有效的）

3、节流和防抖的应用场景

节流

• 搜索框的联想功能，每隔一段时间“联想”一次。
• 滚动条的定时滚动功能，每隔一段时间加载一部分内容。

防抖

• 浏览器页面缩放时，根据最后一次页面大小渲染页面。
• 注册和登录动画验证时，根据最后一次动画结果验证是否符合要求。