JavaScript实现节流防抖
时间: 2023-09-13 10:13:06 浏览: 49
JavaScript中可以使用定时器来实现节流和防抖的效果。下面是一些基本的实现示例:
1. 节流实现:
```javascript
function throttle(func, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
func.apply(this, arguments);
timer = null;
}, delay);
}
};
}
```
使用示例:
```javascript
function handleScroll() {
console.log('Scroll event');
}
const throttledScroll = throttle(handleScroll, 200);
window.addEventListener('scroll', throttledScroll);
```
上述代码中,`throttle`函数接受一个函数和一个延迟时间作为参数,返回一个新的函数。这个新的函数在被调用时,如果定时器不存在,则设置一个定时器,并在延迟时间后执行传入的函数。如果定时器已经存在,则不执行传入的函数。
2. 防抖实现:
```javascript
function debounce(func, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
```
使用示例:
```javascript
function handleInput() {
console.log('Input event');
}
const debouncedInput = debounce(handleInput, 500);
inputElement.addEventListener('input', debouncedInput);
```
上述代码中,`debounce`函数接受一个函数和一个延迟时间作为参数,返回一个新的函数。这个新的函数在被调用时,会先清除之前的定时器,然后设置一个新的定时器,并在延迟时间后执行传入的函数。
这些是基本的节流和防抖实现示例,你可以根据实际需求进行调整和扩展。希望对你有所帮助!如果还有其他问题,请继续提问。