input框名称校验防抖，且去除异步时出现的加载环

遇到一个input名称效验的功能，于是想起了之前注册账号的时候会默认提示该名称已存在，于是想复现这个功能

1.首先定义一个带返回的节流函数，该函数可以写在页面中，如果复用的比较多的话也可以封装成全局方法

const  debounce = function (func, wait) {
  let timer;
  return function (that) {
    let context = that; 
    let args = arguments; 
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

2.将判断名称是否重复的方法封装以下，校验规则通过callback返回值来判定表单效验规则

 

  // 判断名称是否重复
        nameCheck(rule, value1, callback) {
//因为我这有编辑所以加了个判断value1是否有值且通过id判断是否是在编辑操作
          if(value1 && !this.form.materialId) {
            this.getCheckNameApi().then(
          (value) => {
//value接收api返回的信息后判断是否重复，重复了则返回后端的报错信息
            if(value != 'ok' ) {
              return callback(value)
          }else {
            return callback()
          }}   
         )
          } else {
            return callback()
          }

        
       
      },
        // 判断名称是否重复
        getCheckNameApi() {
         return  new Promise((resolve) => {
//checkName是验证名称是否重复的api接口
          checkName({
            kitchenArea: this.form.kitchenArea,
            materialName: this.form.materialName
          }).then((res) => {
//接口返回的msg判断信息通过reslove出去
     
            resolve(res.msg)
          })
         })
        },

 3.在想要校验的输入框中填写效验规则

 <Form
        ref="formValidate"
        :model="form"
        :rules="ruleValidate"
        :label-width="120"
      >
        <FormItem
          label="食材名称:"
          prop="materialName"
        >
          <Input
          ></Input>
        </FormItem>
</Form>  
ruleValidate: {

              materialName: [{ required: true, message: '食材名称不能为空', trigger: 'blur',},
//在此将刚写好的校验规则写上去，
              { validator:  debounce(this.nameCheck,500) , trigger: 'change' }],

}

5.发现异步触发input框后面会显示加载环，感觉影响用户体验，于是找到加载环的class类名将其隐藏

/deep/ .ivu-icon-ios-loading:before{
  display: none;
}

6.就此一个input框名称校验防抖，且去除异步时出现的加载环的效果就出来了