函数去抖（debounce）& 函数节流（throttle）

1. 什么是函数去抖 & 函数节流

让某个函数在一定 事件间隔条件（去抖debounce） 或 时间间隔条件（节流throttle） 下才会去执行，避免快速多次执行函数（操作DOM，加载资源等等）给内存带来大量的消耗从而一定程度上降低性能问题。

debounce: 当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。
throttle：预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。

debounce使用场景

scroll事件（资源的加载）
mousemove事件（拖拽）
resize事件（响应式布局样式）
keyup事件（输入框文字停止打字后才进行校验）

debounce（防抖），简单来说就是防止抖动。

从上图中我们可以看到，当持续触发事件时，debounce会合并事件且不会去触发事件，当一定时间内没有触发再这个事件时，才真正去触发事件～ 一起来实现个简单的debounce：

 

function debounce(fn, delay) {
  var ctx;
  var args;
  var timer = null;

  var later = function () {
    fn.apply(ctx, args);
    // 当事件真正执行后，清空定时器
    timer = null;
  };

  return function () {
    ctx = this;
    args = arguments;
    // 当持续触发事件时，若发现事件触发的定时器已设置时，则清除之前的定时器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 重新设置事件触发的定时器
    timer = setTimeout(later, delay);
  };
}

 

throttle 节流

throttle（节流），当持续触发事件时，保证隔间时间触发一次事件。

1. click事件（不停快速点击按钮，减少触发频次）
2. scroll事件（返回顶部按钮出现\隐藏事件触发）
3. keyup事件（输入框文字与显示栏内容复制同步）
4. 减少发送ajax请求，降低请求频率

 上图中绿色块表示触发一次事件，持续触发事件时，throttle会合并一定时间内的事件，并在该时间结束时真正去触发一次事件～ 一起来看看throttle的简单实现：

function throttle(fn, delay) {
  var ctx;
  var args;
  // 记录上次触发事件
  var previous = Date.now();

  var later = function () {
    fn.apply(ctx, args);
  };

  return function () {
    ctx = this;
    args = arguments;
    var now = Date.now();
    // 本次事件触发与上一次的时间比较
    var diff = now - previous - delay;

    // 如果隔间时间超过设定时间，即再次设置事件触发的定时器
    if (diff >= 0) {
      // 更新最近事件触发的时间
      previous = now;
      setTimeout(later, delay);
    }
  };
}

两者间的核心区别就在于持续触发事件时，前者合并事件并在最后时间去触发事件，而后者则是隔间时间触发一次～ 

工具包：

Lodash ： Lodash 简介 | Lodash 中文文档 | Lodash 中文网

Underscore：debounce | Underscore.js 中文文档 | Underscore.js 中文网