vue中input如何实现防抖

防抖函数的原理：

• 只有在事件触发的时候才会延迟加载，如果在延迟加载之前再次触发，则会刷新延迟时间重新延迟，触发次数有且只有触发一次；

使用场景：

• 防抖函数一般是用于频繁触发事件，而我们只需要它触发一次的场景，比如：输入框的oninput事件、button按钮点击事件、点赞等操作场景；

实例：

• 例如在vue-cli脚手架中使用防抖函数来进行提升性能
• vue-cli：定义一个util.js，添加以下代码

  // 函数防抖 (注意：我们在vue-cli中自定义方法必须要export抛出，不然组件读取不到)
  export function debounce(fn, wait) {
      let timeout = null;
      wait = wait || 600;
      return function () {
        let that = this;
        if(timeout !== null)   clearTimeout(timeout);  
        timeout = setTimeout(() => {
          fn.apply(that);
        }, wait);
      }    
  }
  

  使用和引用组件：

• //在需要用到的页面引入
  import {debounce} from "@/utils/utils"

  html

•  <input v-model="value" @input="changeValue"  />
          
  

  调用方法：

• methods:{
      changeValue:debounce(function(){
       console.log(111)
      }, 500)  //这个500代表事件延迟500ms执行
  }