用setTimeOut函数简单的模拟防抖
时间: 2024-04-08 13:33:15 浏览: 15
使用`setTimeout`函数可以简单地模拟防抖效果。防抖是一种常用的前端技术,用于限制某个函数在短时间内多次触发时只执行一次。下面是一个使用`setTimeout`函数实现简单防抖的示例代码:
```javascript
function debounce(func, delay) {
let timerId;
return function() {
const context = this;
const args = arguments;
clearTimeout(timerId);
timerId = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
// 要进行防抖的函数
function handleInput() {
console.log("处理输入...");
}
// 使用防抖函数包装原始函数
const debouncedHandleInput = debounce(handleInput, 500);
// 模拟输入事件
debouncedHandleInput();
debouncedHandleInput();
debouncedHandleInput();
// 将只会输出一次 "处理输入..."
```
在上面的示例中,`debounce`函数接受一个原始函数和延迟时间作为参数,返回一个新的函数。这个新的函数在被调用时会使用`setTimeout`来延迟执行原始函数,并且如果在延迟期间再次调用了新函数,则会清除之前的定时器并重新设置新的定时器。
这样,当连续触发多次调用`debouncedHandleInput`时,只有最后一次调用会导致原始函数执行。其他的调用会被防抖函数忽略掉。