vue防抖函数实现
防抖函数原理
防抖（Debounce）是一种限制函数频繁调用的技术，在事件被触发后延迟执行，若在延迟时间内再次触发，则重新计时。适用于输入框搜索、窗口大小调整等场景。
Vue 中实现防抖的三种方式
使用 Lodash 的 debounce 方法
安装 Lodash 并导入 debounce 函数：
npm install lodash在 Vue 组件中使用：
import { debounce } from 'lodash';
export default {
methods: {
handleInput: debounce(function() {
// 实际业务逻辑
console.log('Debounced input');
}, 500)
}
}自定义防抖函数
封装一个可复用的防抖函数：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
export default {
methods: {
search: debounce(function(query) {
// API调用或数据处理
}, 300)
}
}使用 Vue 指令实现防抖
全局注册防抖指令：
Vue.directive('debounce', {
inserted(el, binding) {
let timer;
el.addEventListener('input', () => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
binding.value();
}, binding.arg || 500);
});
}
});
// 使用方式
<input v-debounce:300="searchMethod">注意事项
- 防抖时间需根据业务场景调整，通常输入类交互建议300-500ms
- 在组件销毁时应当清除定时器，避免内存泄漏
- 对于需要立即执行的场景（如第一次触发立即执行），可扩展实现 leading 选项
完整组件示例
export default {
data() {
return {
searchQuery: ''
};
},
methods: {
// 使用自定义防抖
debounceSearch: debounce(function() {
this.actualSearch();
}, 500),
actualSearch() {
// 实际搜索逻辑
console.log('Searching:', this.searchQuery);
}
}
}模板中使用：
<input v-model="searchQuery" @input="debounceSearch">
