一、描述

在输入框输入内容或者说输入关键词的时候，往往都要进行做防抖处理。如果不做防抖，你输入什么，动态绑定的数据就会保持一致。这样不好吗，同步获取。有个业务场景，如果是搜索框，你每次一个字符，字符串发生改变，就会请求接口一次获取数据。如果等用户输入完隔一段时间再发送请求，则会更好的利用服务器资源。

二、什么是防抖

        防抖（Debounce）是一种常用的前端性能优化技术，用于限制一个函数在短时间内连续触发时只执行一次。在实际开发中，用户可能会频繁触发某个事件（比如输入框的输入事件），如果每次触发都立即执行相应的处理函数，可能会导致性能问题或产生不必要的请求。

        通过使用防抖技术，可以确保在用户停止触发事件后的一段时间内才会执行相应的处理函数，从而减少不必要的重复操作。基本思路是设置一个定时器，在每次触发事件时清除之前的定时器并重新设置一个新的定时器，使得处理函数只有在间隔一定时间内没有再次触发时才被执行。

        防抖常用于输入框搜索、滚动加载等场景，可以有效减少无效请求或操作，提升用户体验和页面性能。

三、简单实现

<input type="text" placeholder="请输入关键词搜索" focus v-model.trim="keyword" @input="getword">

data() {
      return {
        keyword: "",
        timer:null,
      };
    },

// 输入框输入事件(使用防抖进行处理)
      getword(e) {
        clearTimeout(this.timer)
        this.timer = setTimeout(()=> {
            //把值回传给父组件
          this.$emit('getkeyword', this.keyword)
        },500)
      },