vue 实现函数防抖、节流

防抖:多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。

节流:触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。

//实现函数防抖
// 防抖:多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。
export function debounce(fn, delay) {
  let delay2 = 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);
    }, delay2);
  };
}
// 节流:触发函数事件后，短时间间隔内无法连续调用，只有上一次函数执行后，过了规定的时间间隔，才能进行下一次的函数调用。
export function throttle(fn, interval) {
  var last;
  var timer;
  var interval2 = interval || 200;
  return function () {
    var th = this;
    var args = arguments;
    var now = +new Date();
    if (last && now - last < interval2) {
      clearTimeout(timer);
      timer = setTimeout(function () {
        last = now;
        fn.apply(th, args);
      }, interval2);
    } else {
      last = now;
      fn.apply(th, args);
    }
  };
}

实际应用

//设备号模糊搜索
getGpsInfo: debounce(function (data) {
  this.loading = true;
  api.getGpsFilter({
    term: data
  }).then(res => {
  //实际业务
  }).finally(() => {
    this.loading = false;
  });
}, 300)