防抖和节流（Debounce & Throttle）

防抖

应用场景举例：
输入框停止输入后，发送ajax请求进行校验。
页面滚动事件停止后判断。

代码描述：
触发后，某个时间之后开始执行，如果等待过程中再次触发，则重新开始计时。

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

节流

应用场景举例：
leetcode 的提交代码。
射击游戏中单位时间内只能发射一颗子弹。
dom元素的拖拽功能。

代码描述：
触发后立刻执行，等待期内再次触发无效，过了等待期可以再次触发。

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

区别与联系

两者都在快速连续触发函数时，减少了函数的实际执行次数。
防抖是触发后等待一段时间才能执行，节流是一个时间段内只能执行一次。

参考目录

JavaScript 函数节流和函数去抖应用场景辨析 · Issue #20 · lessfish/underscore-analysis