vue中使用防抖和节流

防抖： 在一定时间内，连续频繁触发函数，函数只会被执行一次。也就是当调用一个函数n毫秒后才会执行该函数，若在这n毫秒内又调用这个函数则将重新计算执行时间。

节流： 一定时间内函数只执行一次，也就是预先设定一个执行周期，当调用函数的时间大于等于设置的执行周期则执行该函数，然后进入下一个新周期。

区别：

防抖是将多次执行变成最后一次执行，而节流是将多次执行变为每隔一段时间执行一次。

代码

// 防抖
export function funcDebounce(fn, delay) {
  var delay = delay || 200;
  var timer;
  return function () {
    var th = this;
    var args = arguments;
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(function () {
      timer = null;
      fn.apply(th, args);
    }, delay);
  };
}
// 节流
export function funcThrottle(fn, interval) {
  var last;
  var timer;
  var interval = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(th, args);
      }, interval);
    } else {
      last = now;
      fn.apply(th, args);
    }
  };
}

使用