防抖和节流代码
时间: 2023-06-21 09:15:21 浏览: 43
防抖和节流都是用来限制函数的执行频率,防止函数被频繁触发。
防抖:在函数需要连续触发多次时,只有最后一次操作才会被执行。比如搜索框输入联想,用户输入每个字符都会触发搜索,但是我们不希望每次输入都触发搜索,而是等待用户输入完成后再进行搜索。
代码实现:
```javascript
function debounce(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
```
调用方式:
```javascript
function search() {
// 模拟搜索操作
}
let debounceSearch = debounce(search, 500);
input.addEventListener('input', debounceSearch);
```
节流:在函数需要连续触发多次时,只有在一定时间间隔内才会执行一次。比如页面滚动时触发事件,我们不希望每次滚动都触发事件,而是等待一段时间后再执行一次。
代码实现:
```javascript
function throttle(fn, delay) {
let timer = null;
return function() {
let context = this;
let args = arguments;
if (!timer) {
timer = setTimeout(function() {
fn.apply(context, args);
timer = null;
}, delay);
}
};
}
```
调用方式:
```javascript
function scroll() {
// 模拟滚动操作
}
let throttleScroll = throttle(scroll, 500);
window.addEventListener('scroll', throttleScroll);
```