说起来自己都不信，在很长一段时间中，我把防抖和节流的概念搞混，也算是后知后觉，还是记录一下靠谱。

防抖

一句话: 让一个被多次触发的函数，在最后一次触发又过了n个时间单位后才「执行」, 即每一次触发都会重新计时。即只要用户一直不断的触发函数，那么函数永远不会被执行。

实现

function debounce(fn, delay){
  let timer = null
  return function(...args){
    const ctx = this
    clearTimeout(timer) // 清空
    timer = setTimeout(()=>{
      fn.call(ctx, ...args)
    }, delay)
  }
}

使用场景

1. input连续输入时的校验/缓存
2. scroll/resize等频繁触发的事件

节流

上面说到防抖会在不停触发时，永远不被执行。而节流无法组织函数的执行，只能像水库闸门一样，减小水的流量，即控制函数在一段时间内只能执行一次(不管被触发几次)。

function throttle(fn, threshhold = 160){
  let tiemr = null
  let start = new Date().getTime()
  return function(...args){
     const curr = new Date().getTime()
     const ctx = this
     if(curr - start >= threshhold){ 
     fn.apply(ctx, args) //只执行一部分方法，这些方法是在某个时间段内执行一次
     start = curr
   }
  }
}

使用场景

一些提交按钮的点击事件，避免重复提交 (如果用防抖，也能起到防重复提交的作用，但就会出现提交延时，对交互不够友好)