點擊事件的防抖和節流

1.新建js文件

// 防抖:多次觸發事件后，事件處理函數只執行一次，並且是在觸發操作結束時執行。
export function debounce(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 throttle(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);
    }
  }
}

2.在需要的頁面引入

import { debounce, throttle } from "src/utils/utils";
method:{
  showCompleteTel: throttle(function() {
     //邏輯代碼
    }, 2000),
}