标签：防抖 Vue 节流 args timer ruleForm getNewTime value fn

节流函数

//节流:一段时间内，只执行一次某个操作;过了这一段时间，还有操作的话继续执行新的操作
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;
        }
      });
    },

标签：防抖,Vue,节流,args,timer,ruleForm,getNewTime,value,fn
来源： https://www.cnblogs.com/liangyingqi/p/16372926.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。