函数的防抖与节流

最初接触到函数的防抖与节流是在lodash库中看到了这样一个函数throttle，当时的心理感觉是mmp，这是啥，一查翻译，哦...原来，仍是不懂。防抖与节流看着很高级，其实在平常的编程中也是常常遇到，值得咱们拥有。

函数防抖(debounce)

当事件持续被触发时，并不当即执行事件处理函数，而是等到约定的时间后再执行，当约定的时间到来以前，又一次触发了事件则从新进行计时。

• 函数防抖的简单实现

//arguments 为非箭头函数中可用的内部变量，为传递给函数参数的伪数组。
const debounce = function(fn, wait) {
  let timer = null;
  return function handler() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, wait)
  }
}
复制代码

经过 fn.apply 调用 fn 是为了可以保持函数 handler 调用者的 this 上下文，而不是指向 window。来看下面的例子:

function calcCirleArea(arg) {
    const r = this.r; // 10
    const area = 3.14 * r * r; // 314
    return area;
  }

  const calcArea = debounce(calcCirleArea, 1000);
  const circle = {
    r: 10,
    calcArea
  };
  circle.calcArea();
复制代码

执行 circle.calcArea()，在函数 calcCirleArea 中能够访问到对象 circle 的属性 r，缘由就是经过 fn.apply 调用时绑定了 circle 的上下文。假如咱们经过fn()直接调用，在非严格模式下 calcCirleArea 函数 this 的指向为 window，this.r为 undefined，因此须要经过 fn.apply 来调用。

• 防抖函数应用场景

  好比在注册用户的时候，验证密码是否符合规范，咱们并不须要在用户输入时频繁地去验证，而是等到用户最后一次触发输入后，等待必定时间没有再输入，此时认为输入已经结束，能够进行验证了，这是符合逻辑的，也提高了性能。

  无防抖效果:

  防抖效果:

函数节流(throttle)

当事件持续被触发时，保证函数在必定时间内只执行一次事件处理函数。

• 函数节流的简单实现

  函数节流的实现主要有时间轴的方法和计时器的方法。时间轴的方法是经过比较事件触发时间与上一次函数执行时间(第一次为 0，保证第一次必定执行)的差 dt 来判断是否执行事件处理函数，若是 dt 大于约定的时间则执行，反之则不执行；计时器的方法是在事件触发时，若是当前没有计时器则设置计时器来触发事件处理函数的执行。这两种方法对于最后一次触发事件，都有可能不会执行。

  1. 时间轴

  const throttle = function(fn, wait) {
    //pre设置为0使得第一次必定执行
    let pre = 0;
    return function() {
      const now = Date.now();
      const context = this;
      const args = arguments;
      if (now - pre > wait) {
        fn.apply(context, args);
        pre = now;
      }
      }
    }
  复制代码

  2. 计时器

  const throttle = function(fn, wait) {
      let timer = null;
      return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        if (!timer) {
          timer = setTimeout(function() {
            fn.apply(context, args);
            timer = null;
          }, wait)
        }
      }
    }
  复制代码

有些时候咱们但愿至少第一次和最后一次触发事件获得响应，这就能够结合时间轴和计时器的方法。 以下，当事件最后一次触发时要么达到了约定的时间能够当即执行事件处理函数，要么设置一个 timer 等待约定的时间后执行。

const throttle = function(fn, wait) {
    let pre = 0;
    let timer = null;
    return function() {
      const context = this;
      const args = arguments;
      const now = Date.now();
      clearTimeout(timer);
      const dt = now - pre;
      if (dt > wait) {
        fn.apply(context, args);
        pre = now;
      } else {
        timer = setTimeout(function() {
          fn.apply(context, args);
        }, wait)
      }
    }
  }
复制代码

• 节流函数应用场景

  好比在客户端搜索，服务器返回搜索结果时咱们但愿尽快刷新搜索结果，但又不但愿频繁的向服务器请求结果而致使性能降低，节流就是一个很好的选择。

  无节流效果:

  节流效果:

总结

• 防抖和节流都是用来控制函数的频繁触发，提高性能。
• 在频繁触发事件的状况下防抖有可能不执行处理函数，而节流在事件触发后，必定会执行一次。
• 为了可以在第一次和最后一次触发事件时执行处理函数，能够结合时间轴和计时器的方法。