延迟搜索逻辑实现

简介

在移动端或者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)
        }
      }
    }
  }

 

小结

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