举例一个防抖的简单例子
时间: 2023-05-30 07:08:04 浏览: 47
假设我们有一个搜索框,当用户在搜索框中输入时,我们希望能够实时地搜索相关内容。但是,如果用户输入过快,每次输入都会触发搜索,这样会给服务器带来不必要的压力。因此,我们可以使用防抖来限制搜索的频率。
下面是一个防抖的简单例子:
```javascript
// 防抖函数
function debounce(func, delay) {
let timerId;
return function() {
const args = arguments;
const context = this;
clearTimeout(timerId);
timerId = setTimeout(() => {
func.apply(context, args);
}, delay);
};
}
// 搜索函数
function search() {
console.log('正在搜索...');
}
// 获取搜索框元素
const input = document.getElementById('search-input');
// 给搜索框绑定防抖事件
input.addEventListener('input', debounce(search, 500));
```
在上面的代码中,我们定义了一个防抖函数 `debounce`,它接受一个函数和一个延迟时间作为参数。当防抖函数被调用时,它会清除之前的定时器,并重新设置一个新的定时器。如果在延迟时间内再次调用防抖函数,则会清除之前的定时器,重新设置一个新的定时器。这样,我们就可以限制搜索频率,避免过度搜索。
然后,我们定义了一个搜索函数 `search`,当用户输入时,我们希望调用这个函数进行搜索。最后,我们获取了搜索框元素,并给它绑定了一个防抖事件。当用户输入时,防抖函数会被调用,如果在延迟时间内再次输入,则会清除之前的定时器,重新设置一个新的定时器,直到用户停止输入。当延迟时间到达后,搜索函数会被调用,进行搜索操作。