搜索功能（四）-搜索关键字防抖效果——接口调用时进行防抖处理 & 函数防抖：特定时间内，限制发送请求的频率 & 应用场景-表单验证和关键字搜索

关键字防抖效果——接口调用时进行防抖处理 & 函数防抖：特定时间内，限制发送请求的频率 & 应用场景-表单验证和关键字搜索

函数防抖：限制发送请求的频率

现象：每输入一次，就请求一次接口；频繁请求，降低性能

• 防止发送请求的频率

handleInput() {
  // 定时任务在延时时间范围内，如果被销毁，那么就不会再出发
  // 函数防抖debounce：在指定时间内没有触发特定条件（输入框字符变化），那么就执行一次任务（发送一次请求）
  clearTimeout(this.timer)
  this.timer = setTimeout(async ()=>{
    let res = await request('goods/qsearch', {query: this.keyword})
    this.resultList = res.data.message
  }, 1000)
}

实例

第一步：使用定时任务

  data () {
    return {
      // 定时任务标记,默认为空
      timer: null
    }
  }

第二步：函数防抖，限制发送请求的频率；延迟时间，可以自定义

结构

    <!-- 顶部搜索栏 -->
    <div class="search">
      <div class="search-content">
        <!-- 输入框 -->
        <div class="search-input">
          <icon type='search' size='16'/>
          <input @input='queryData' v-model='keyword' placeholder="请输入关键字" />
        </div>
        <!-- 取消按钮 -->
        <button class="cancel" v-if='keyword' @click='handleCancel'>取消</button>
        <!-- 搜索的结果 -->
        <div class="search-modal" v-if='keyword'>
          <div :key='item.goods_id' v-for='item in list' class="search-item">
            {{item.goods_name}}
          </div>
        </div>
      </div>
    </div>

方法

  methods: {
    queryData () {
      // 根据关键字查询匹配的商品列表
      // 限制请求发送的频率
           // 如果延时任务在触发之前被销毁，那么该任务就从时间队列中清除掉了
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        let res = await request('goods/qsearch', {
          query: this.keyword
        })
        this.list = res
      }, 1000)
       // 函数防抖 debounce ：连续固定时间内（1秒），如果不触发条件（输入框的字符变化），那么就执行一次任务（发送请求）
      // 函数防抖的应用场景：表单验证（表单中输入内容停止时进行验证）
    },
  }

图解

函数防抖应用：

多次输入，只请求了一次；证明接口的请求频率，已经被限制成功

函数防抖 debounce定义 ：

连续固定时间内（1秒），如果不触发条件（输入框的字符变化），那么就执行一次任务（发送请求）

函数防抖的应用场景：

表单验证（表单中输入内容停止时进行验证）