vue中,防抖函数介绍
防抖(Debounce)是一种在编程中常见的技术,它可以限制一个函数在一定时间内只执行一次。
在 Vue 中,你可能会在处理用户输入或窗口大小变化等事件时使用到防抖。以下是一个简单的防抖函数的实现:
function debounce(func, wait) {
let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args);
}, wait);
};
}
这个 debounce
函数接收一个要执行的函数 func
和一个等待时间 wait
(毫秒)。它返回一个新的函数,这个新函数会在被调用后等待 wait
毫秒,然后再执行 func
。如果在等待过程中又被调用了,那么就会取消上一次的等待并重新开始等待。
你可以在 Vue 组件中像这样使用它:
<template>
<input type="text" @input="debouncedInputHandler">
</template>
<script>
import { debounce } from './path/to/debounce';
export default {
methods: {
inputHandler(event) {
// 在这里处理你的输入事件逻辑
console.log(event.target.value);
},
debouncedInputHandler: debounce(function(event) {
this.inputHandler(event);
}, 500)
}
};
</script>
在这个示例中,用户每次在输入框输入时,都会触发 debouncedInputHandler
方法,但由于防抖,inputHandler
方法只会在用户停止输入后的 500 毫秒才执行。