vue中使用防抖函數

1.新建lodash.js

// /*函數防抖*/
export function throttle(fn) {
  let canRun = true; // 通過閉包保存一個標記
  return function () {
    // 在函數開頭判斷標記是否為true，不為true則return
    if (!canRun) return;
    // 立即設置為false
    canRun = false;
    // 將外部傳入的函數的執行放在setTimeout中
    setTimeout(() => {
      // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。
      // 當定時器沒有執行的時候標記永遠是false，在開頭被return掉
      fn.apply(this, arguments);
      canRun = true;
    }, 500);
  };
}

注：我這手把時間統一定死了，如果想自定義的話可以把時間作為參數自己傳進來，方法修改如下：

// /*函數防抖*/
export function throttle(fn,delay) {
  let canRun = true; // 通過閉包保存一個標記
  return function () {
    // 在函數開頭判斷標記是否為true，不為true則return
    if (!canRun) return;
    // 立即設置為false
    canRun = false;
    // 將外部傳入的函數的執行放在setTimeout中
    setTimeout(() => {
      // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次循環了。
      // 當定時器沒有執行的時候標記永遠是false，在開頭被return掉
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

使用時：

//保存用戶信息修改
    save: throttle(function (500) {
         //...
    })

 

2.在頁面中引用

import { throttle } from "@/utils/lodash";

 

3.在頁面中使用

 示例代碼：

//保存用戶信息修改
    save: throttle(function (e) {
      //表單驗證
      this.$refs["dialogForm"].validate((vaild) => {
        if (vaild) {
          saveUser(this.dialogForm).then((ret) => {
            if (ret.isSuccess) {
              operateSuccess();
              this.getTableList();
            } else {
              operateFail(ret.errMsg);
            }
            this.dialogVisible = false;
          });
        }
      });
    }),