二十八、Vue的防抖和节流

节流函数

//节流:一段时间内，只执行一次某个操作;过了这一段时间，还有操作的话继续执行新的操作
export function throttle (fn, time) {
  // 记录该函数是否已经执行, 利用闭包特性延长变量生命周期，当setTimeout执行完timer才为空
  let timer = null
  time = time || 1000
  //...args接收函数传值，没有传值时为空
  return function (...args) {
    if (timer) {
      return //结束执行
    }
    const _this = this
    timer = setTimeout(() => {
      console.log(args)
      timer = null
    }, time)
    //执行函数
    fn.apply(_this, args) //改变fn()的this指向，使其指向vue实例,以便执行fn()中的vue实例上的函数,如this.submitFormTH(value);

// console.log(this)  } }

组件内使用

<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button >

    submitForm: throttle(function (value) {
      //value是submitForm传输过来的参数
      this.submitFormTH(value);
    }, 1000),

    submitFormTH(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.$route.path == "/user/generalUser") {
            this.ruleForm.nickname = this.ruleForm.name;
            this.ruleForm.grade = 0;
            this.ruleForm.birthday = this.getNewTime();
            this.ruleForm.ctime = this.getNewTime();
            let result = await addUser(this.ruleForm);
            this.ruleForm = {};
            this.ruleForm.sex = "男";
          }
          if (this.$route.path == "/user/adminUser") {
            this.ruleForm.nickname = this.ruleForm.name;
            this.ruleForm.grade = 1;
            this.ruleForm.birthday = this.getNewTime();
            this.ruleForm.ctime = this.getNewTime();
            let result = await addUser(this.ruleForm);
            this.ruleForm = {};
            this.ruleForm.sex = "男";
          }
          this.$emit("closeAdd", "close");
          this.$message({
            message: "添加成功",
            type: "success",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },