借助防抖解决输入框的非空校验

场景

在工作中遇到一个业务场景是输入框失去焦点的时候查询接口,查询过接口的数据可以作为
历史记录在输入框得到焦点时作为列表的形式,展示在输入框下方,如下图

问题

新需求要求在输入框失去焦点的时候做非空校验及提示,之前的做法是在输入框失去焦点和点击历
史记录列表调用同一个函数,因此在点击历史列表的时候相当于触发输入框的失焦时间和列表的点
击事件,第一次事件触发的时候由于输入框为空会提示信息,紧接着会触发点击事件补全输入框

分析

为了解决第二次触发方法并且不会在第一次触发的时候就提示信息,可以借助函数防抖的原理
1. 全局声明一个定时器
2. 判断定时器是否存在,如果存在清楚定时器,代码如下

解决

 handleOptions(val,txt){ // timer 全局声明的定时器 val输入框的绑定值 txt 提示信息
        if (this.timer) {
          clearTimeout(this.timer)
          this.timer=null
        }
        this.timer = setTimeout(()=>{
          if(!val){
            alert(txt)
          }
        })
      }
 // 在失去焦点函数中调用上述函数即可