js定时器防抖函数的使用
时间: 2023-09-12 15:09:07 浏览: 61
JavaScript中的定时器防抖函数可以用来延迟执行某个函数,以避免频繁触发。下面是一个简单的示例:
```javascript
function debounce(func, delay) {
let timer;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
```
在上述代码中,`debounce`函数接受两个参数:`func`是要执行的函数,`delay`是延迟时间。该函数内部定义了一个定时器变量`timer`,并返回了一个闭包函数。
当调用返回的闭包函数时,它首先会清除之前设置的定时器(如果有的话),然后创建一个新的定时器。新的定时器会在延迟时间后执行传入的函数`func`。这样,如果在延迟时间内再次调用闭包函数,旧的定时器会被清除,从而实现了防抖效果。
使用示例:
```javascript
function handleInput() {
console.log('Input was debounced!');
}
const debouncedHandleInput = debounce(handleInput, 500);
// 模拟输入事件
debouncedHandleInput(); // 第一次调用
debouncedHandleInput(); // 在500毫秒内再次调用
```
在上述示例中,`handleInput`函数会在输入事件被触发后延迟500毫秒执行。如果在这500毫秒内再次触发输入事件,旧的定时器会被清除,从而重新计时延迟。这就实现了防抖的效果,确保在用户连续输入时只执行最后一次输入的处理函数。