vue之elementui的异步表单,防抖,节流验证，之做进vuex之actions

1>vue页面

 data() {
    let validcodeName = (rule, value, callback) => {
      let parmas = {
        name: value,
        rule: rule,
        callback: callback
      };
      this.getProjectByName(parmas);
    };
    return {
rules: {
//注意，不管是防抖还是节流，都得在这里去加，不能加在validcodeName里面

demandName: [{ required: true, validator: this.debounce(validcodeName, 1000), trigger: 'change' }],

}
}

methods: {

...mapActions(['getFunctionByName']),

//发送请求

sendGetFunctionByName(rule, value, callback) {

let parmas = {

name: value,

projectId: this.$route.query.id,

type: '需求',

rule: rule,

callback: callback

};

this.getFunctionByName(parmas);

},

//防抖

debounce(fn, delay) {

// 记录上一次的延时器

var timer = null;

var delay = delay || 200;

return function() {

var args = arguments;

var that = this;

// 清除上一次延时器

clearTimeout(timer);

timer = setTimeout(function() {

fn.apply(that, args);

}, delay);

};

},

//节流

throttle(fn, wait) {

var timer = null;

return function() {

var context = this;

var args = arguments;

if (!timer) {

timer = setTimeout(function() {

fn.apply(context, args);

timer = null;

}, wait);

}

};

},

actions

  actions: {
    getProjectByName(context, data) {
      console.log("22", data);
      let params = {
        name: data.name
      };
      SourceMirror.getProjectByName(params).then(res => {
        if (res.data.data === false) {
          data.callback(new Error("项目名称已重复"));
        } else if (
          data.name == undefined ||
          data.name == "" ||
          data.name == null
        ) {
          data.callback(new Error("请输入项目名称"));
        } else {
          data.callback();
        }
        context.commit("verifProjectByName", res.data.data);
      });
    }
  },

2>场景，blur的input离开就发送修改接口，但是与页面上其他事件冲突，必须请求完了才允许点，这时候就需要防抖了

   <input
            :class="{'isFocus':isFocus|| detail.expectHours}"
            
            :disabled="saveHandleStatus==4"
            v-model="detail.expectHours"
            @focus="isFocus= true"
            @blur="debounce(hoursBlur,2000)()"  //
            class="hours"
            :placeholder="placeholder"
          />

@blur="debounce(hoursBlur,2000)()"  //注意这个写法，不这样写，不执行