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;
          });
        }
      });
    }),