前言:众所周知搜索这一功能是一个高消耗服务器的功能,每一次的请求都是在给服务器增压,避免频率过快,导致功能下降,服务器崩溃,我们需要做一些限制的解决方案。今天我们的主题就是——防抖的使用
什么是防抖?
在固定的时间内没有触发事件,会在固定时间结束后触发,如果固定时间内触发事件了,会在延长固定时间再触发 防抖主要利用定时器实现
一、先上案列:
以上就是我们平常的搜索功能,快速的点击,一次次的去请求我们的服务器接口,没有加防抖来限制我们的请求
二、示范
我们可以看到加完防抖之后,再规定的时间内多次点击没有多次请求,而是在不点击之后,进行请求加载,
三、具体代码书写和配置
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>//换上我们的自定义名字就可以了
总结:很基础的防抖定时器的配置加载,来优化了我们的搜索功能