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}"
            id="inputRef"
            :disabled="saveHandleStatus==4"
            v-model="detail.expectHours"
            @focus="isFocus= true"
            @blur="debounce(hoursBlur,2000)()"  //
            class="hours"
            :placeholder="placeholder"
          />

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