vue 搜索按钮防抖
时间: 2023-09-29 19:10:09 浏览: 43
防抖是一种常用的前端技术,它可以有效地降低函数的执行频率,从而提升页面的性能和体验。在 Vue 中实现搜索按钮防抖,常用的方式是使用 debounce 函数。debounce 函数会延迟一段时间执行函数,如果在延迟期间再次触发函数,就会重新计时,直到延迟期结束,才会执行函数。这样就可以避免短时间内频繁触发函数,从而降低服务器压力。
下面是一个使用 debounce 函数实现搜索按钮防抖的示例:
```
<template>
<div>
<input type="text" v-model="keyword">
<button @click="debounceSearch">搜索</button>
</div>
</template>
<script>
import { debounce } from 'lodash'
export default {
data() {
return {
keyword: '',
delay: 500 // 延迟时间,单位毫秒
}
},
methods: {
debounceSearch: debounce(function () {
// 实际执行的搜索函数
console.log('搜索关键字:', this.keyword)
}, this.delay)
}
}
</script>
```
在上面的示例中,使用了 lodash 库的 debounce 函数。在 methods 中定义了 debounceSearch 函数,它会在点击搜索按钮时触发。debounceSearch 函数会调用 debounce 函数,将实际执行的搜索函数作为参数传入,并指定延迟时间为 this.delay。这样,每次点击搜索按钮时,都会执行 debounceSearch 函数,但实际执行的搜索函数会在延迟期结束后才会执行。如果在延迟期内再次点击搜索按钮,就会重新计时,直到延迟期结束后执行搜索函数。