js封装一个防抖函数
时间: 2024-06-15 19:06:19 浏览: 11
当我们在前端开发中需要处理频繁触发的事件时,为了减少性能消耗和提升用户体验,可以使用防抖函数来限制事件的触发频率。下面是一个使用JavaScript封装的防抖函数的示例:
```javascript
function debounce(func, delay) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
```
这个防抖函数接受两个参数:`func`是要执行的函数,`delay`是延迟时间(毫秒)。当事件触发时,防抖函数会清除之前的定时器,并重新设置一个新的定时器,延迟执行传入的函数。
使用示例:
```javascript
function handleInput() {
console.log("Input event triggered");
}
const debouncedHandleInput = debounce(handleInput, 500);
document.getElementById("input").addEventListener("input", debouncedHandleInput);
```
在上面的示例中,当输入框的值发生变化时,`handleInput`函数会被触发。但是由于使用了防抖函数,只有在停止输入500毫秒后才会真正执行`handleInput`函数。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)