vue防抖函数实现
防抖函数的基本概念
防抖（Debounce）是一种优化高频触发事件的技术，确保函数在连续触发时只执行一次。常见场景包括输入框搜索、窗口大小调整等。
Vue中实现防抖的几种方式
使用Lodash库的debounce方法
安装Lodash后，可以直接使用其_.debounce方法：
import _ from 'lodash';
export default {
methods: {
handleInput: _.debounce(function() {
// 实际逻辑代码
console.log('Input debounced');
}, 500)
}
}自定义防抖函数
若不依赖第三方库，可手动实现防抖：
export default {
methods: {
debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
},
handleInput() {
const debouncedFn = this.debounce(() => {
console.log('Input debounced');
}, 500);
debouncedFn();
}
}
}在Vue 3的setup语法中使用
通过ref和onMounted结合实现：
import { ref, onMounted } from 'vue';
export default {
setup() {
const debounce = (func, delay) => {
let timeoutId;
return (...args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func(...args);
}, delay);
};
};
const handleInput = debounce(() => {
console.log('Input debounced');
}, 500);
return { handleInput };
}
}注意事项
- 延迟时间：根据实际需求调整防抖延迟（如300-1000ms）。
- this绑定：自定义防抖函数需通过
.apply(this)确保上下文正确。 - 立即执行：若需首次触发立即执行，可扩展防抖函数逻辑。
通过以上方法，可灵活应对Vue项目中需要防抖的场景。
