Vue手写搜索防抖代码

前言：众所周知搜索这一功能是一个高消耗服务器的功能，每一次的请求都是在给服务器增压，避免频率过快，导致功能下降，服务器崩溃，我们需要做一些限制的解决方案。今天我们的主题就是——防抖的使用

什么是防抖？
在固定的时间内没有触发事件，会在固定时间结束后触发，如果固定时间内触发事件了，会在延长固定时间再触发 防抖主要利用定时器实现

一、先上案列：

以上就是我们平常的搜索功能，快速的点击，一次次的去请求我们的服务器接口，没有加防抖来限制我们的请求

二、示范

我们可以看到加完防抖之后，再规定的时间内多次点击没有多次请求，而是在不点击之后，进行请求加载，

三、具体代码书写和配置

1.在我们的vue目录下找到main.js进行配置

Vue.directive('debounce', {
    
    
  inserted(el, binding, vnode) {
    
    
    let timer = {
    
    }
    el.addEventListener('click', () => {
    
    
      if (timer) {
    
    
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
    
    
        binding.value()
      },1000)  //设置时间为1s之后请求
    })
  }
})

2.在页面的使用

   <div  v-debounce="wkNoOnSearch">搜索</div>//换上我们的自定义名字就可以了

总结：很基础的防抖定时器的配置加载，来优化了我们的搜索功能