延迟搜索逻辑实现

简介

在移动端或者pc端有时候要作实时搜索的效果，即根据用户输入的内容，实时调取接口得到相关的列表。可是咱们并不但愿每增长或者减小一个字就立马调取接口，由于这样请求次数太多并且打字速度快的话会不断的请求很耗性能，因此咱们但愿可以在打字结束后的一段时间内发起请求，尽可能少的调取接口

效果如图：

实现逻辑

我是使用的vue，因此如下均为vue代码

下面讲一下逻辑流程

1.双向绑定输入框内的数据，使用watch监听输入框内数据的变化

2.在data中定义变量timer: null

3.当监听到输入框内变化时给timer定义一个延时器，具体延迟时间能够本身定，用以延迟触发调用接口

4.仅这样作并不能达到想要的效果，由于每一次改变仍是会调用接口，关键的是要在监听到输入框改变的时候判断timer 是否存在若是存在就将上一次的延时器清除，由于上一个延时器延迟300ms的缘故，因此搜索不会当即触发，清除定时器后就不会再去请求接口，这样就能够实现延时搜索

参考代码以下：

<el-input type="text" class="myinput" placeholder="请输入会员姓名或手机号" v-model="customer" clearable></el-input>

　　watch: {
    customer() {
      this.showCustomerList = true
      let reg_number = /^[0-9]*$/
      if (this.timer) {
        clearTimeout(this.timer)
      }
      if (!this.customer) {
        this.matchedCustomerList = []
        return
      } else {
        if (reg_number.test(this.customer)) {
          if (this.customer.length > 3) {
            this.timer = setTimeout(() => {
              this.search()
            }, 300)
          }
        } else {
          this.timer = setTimeout(() => {
            this.search()
          }, 300)
        }
      }
    }
  }

 

小结

这样的搜索优化其实应该要注意的，就是这样的小细节，让用户体验和产品都有所提高