函数防抖，函数节流

函数防抖(debounce)

::概念:: 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

::实例:: 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

应用场景

* 给按钮加函数防抖防止表单多次提交。
* 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
* 判断scroll是否滑到底部，滚动事件+函数防抖

>  总的来说，适合多次事件一次响应的情况

函数代码

function debounce(fn, wait) {
  let timer = null;
  return function () {
      const context = this
      const args = arguments
      if (timer) {
          clearTimeout(timer);
          timer = null;
      }
      timer = setTimeout(function () {
          fn.apply(context, args)
      }, wait)
  }
}

var fn = function () {
  console.log('boom')
}
// 滚动停止时候执行
window.onscroll = debounce(fn, 500)

函数节流(throttle)

::概念:: 规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。

::实例:: 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

应用场景

* 游戏中的刷新率
* DOM元素拖拽
* Canvas画笔功能
 * DOM 元素的拖拽功能实现（mousemove）
 * 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
* 计算鼠标移动的距离（mousemove）
* Canvas 模拟画板功能（mousemove）
* 搜索联想（keyup）
* 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

> 总的来说，适合大量事件按时间做平均分配触发。

函数代码

function throttle(fn, gapTime) {
  // 定义上次时间为null
  let _lastTime = null
  return function() {
    // 获取当前时间
    let _nowTime = +new Date()
    // 如果当前时间-上次时间>间隔时间 或 上次时间不存在
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // 执行函数
      fn()
      // 重置上次时间为当前时间
      _lastTime = _nowTime
    }
  }
}

let fn = () => {
  console.log('boom')
}

window.onscroll = throttle(fn, 1000)

使用 debounce 和 throttle 以及常见的坑

• 不止一次地调用 debounce 方法：

// 错误
$(window).on('scroll', function() {
  debounce(doSomething, 300)
})
// 正确
$(window).on('scroll', debounce(doSomething, 200))