vue中input输入框防抖

input输入框防抖

49.1 什么是防抖

防抖：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始计时。

为了避免用户在输入过程中，还没输入完，下面搜索框就一直频繁的在搜索，体验很差。

49.2 防抖解决方案

首先需要把input 的双向绑定v-mode 拆开为 一个value 和一个input事件，在事件里注册一个函数searchData，searchData里获取到input输入内容，再执行搜索函数，代码如下：

<template>
  <div class="box">
    <el-input class="keyword-filter" v-model="params.name" placeholder="请输入关键字进行过滤" @input="debUpdata"
      @keyup.enter.native="keyWordFilter" suffix-icon="el-icon-search"></el-input>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      params: {
        name: ""
      },
      timer: null,
    }
  },
  mounted() {
    this.initTableData()
  },
  methods: {
    this.initTableData(){     
    },
    keyWordFilter() {
      this.initTableData()
    },
    //输入框防抖搜索
    searchData(e) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.initTableData()//查询表格内容的函数，此处省略
      }, 300);
        //后面数为多少毫秒不变之后执行
    }
  },
}
</script>

​ 所谓防抖，无非就是让数据的变化延迟执行，所以在searchData内定义一个timer，每一次执行函数的时候先清空timer，然后在使用setTimeout 定时一秒之后，在执行搜索函数，就实现了最基础的防抖，主要实现代码效果如下：