防抖与节流（一）

防抖：把多次触发频繁的事件合并成一次去执行。就是最后一次事件触发后的指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算。举个通俗的例子：公交车到站了，乘客上车刷卡（频繁触发事件），等所有乘客刷完卡站稳扶好（（最后一次事件触发后指定时间））之后，开车（回调函数）。

节流： 规定在一个单位时间内多次触发函数，只能有一次触发生效函数。频繁触发事件时，每隔指定时间会执行回调。再举个例子：水龙头哗啦哗啦流水（频繁触发事件），拧紧水龙头到一定程度，每隔一段时间就会有水滴流出（回调）

用于实时搜索，实时查询等减小服务压力。

---

防抖--“非立即执行”防抖

export function debounce1(fn, wait = 500) {

  let timer, that, args;

  const later = () => {

    fn.apply(that, args);

  }

  return function () {

    that = this; // 保存this指向

    args = arguments;

    if (timer) {

      clearTimeout(timer);

    }

    timer = setTimeout(later, wait); 

  }

}

防抖--“立即执行” 防抖

export function debounce2(fn, wait = 500) {

  let timer, that, args;

  const later = () => {

    timer = null;

  }

  return function () {

    that = this; // 保存this指向

    args = arguments;

    const callNow = !timer;

    timer = setTimeout(later, wait); 

    callNow && fn.apply(that, args);

  }

}

--------------------------------------------------------------------------------------------------------------------------------------------------------

节流 -- 时间戳

export function throttle1 (fn, wait) {

  var _start = 0;

  return function (...args) {

    var _now = +new Date(), 

      context = this, 

      last = _now - _start;

      if (last < wait) return;

      _start = now;

      fn.apply(context, args)

  }

}

// 方式1：时间戳方式可以通过设置 var _start = 0 来保证第一次触发立即执行回调，不会延迟，同时如果最后一次触发回调与前一次触发回调时间差小于delayTime，则最后一次触发事件不会执行fn；

节流 -- 定时器

export function throttle2 (fn, wait) {

  var timeout;

  return function () {

    var context = this, 

      args = arguments;

      if (!timeout){

        timeout = setTimeout(() => {

          fn.apply(context, args);

          timeout = null;

        }, wait)

      }

  }

}

//方式2： 定时器方式第一次触发才会开始计时，如果最后一次触发回调事件与前一次时间间隔小于delayTime，delayTime之后仍会执行fn。