节流和防抖

节流

理解：在函数多次频繁触发时，函数执行一次后，只有大于设定的执行周期后才会执行第二次

场景：页面滚动（scroll）、DOM 元素的拖拽（mousemove）、抢购点击（click）、播放事件算进度信息

功能：节流函数在设置的delay毫秒内最多执行一次（简单点说就是，我上个锁，不管你点了多少下，时间到了我才解锁）

function throttle(fn, delay) {
  let flag = true
  return (...args) => {
    if (!flag) return
    flag = false
    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}

防抖

理解：在函数频繁触发是，在规定之间以内，只让最后一次生效

场景：搜索框实时联想（keyup/input）、按钮点击太快，多次请求（登录、发短信）、窗口调整（resize）

功能：防抖函数在被调用后，延迟delay毫秒后调用，没到delay时间，你又点了，清空计时器重新计时，直到真的等了delay这么多秒

function debounce(fn, delay) {
  let timer = null
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

节流与防抖的区别

首先概念上不同，然后就是使用场景不同，经典区分图