阅读 566
Vue手写搜索防抖代码

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>//换上我们的自定义名字就可以了
复制代码

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

文章分类
前端
文章标签