js中的防抖节流我经常分不清,不知道他们的使用场景,请你手写一个简单的防抖节流
时间: 2023-07-21 21:26:30 浏览: 53
好的,我来简单地介绍一下防抖和节流的区别和使用场景,并给出一个手写的防抖和节流的示例代码。
防抖和节流都是为了解决高频率触发某个函数的问题。
防抖:指触发事件后,等待一定时间后执行回调函数,如果在这段时间内再次触发事件,则重新计时。适用于高频率触发事件,如搜索框输入、窗口大小改变等。
节流:指连续触发事件,但是在n秒内只执行一次函数。适用于高频率触发事件,如鼠标移动、滚动事件等。
下面是一个简单的防抖和节流的实现示例:
```javascript
// 防抖函数
function debounce(fn, delay) {
let timer = null;
return function() {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
}
}
// 节流函数
function throttle(fn, delay) {
let timer = null;
return function() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, delay);
}
}
}
```
其中,`debounce`函数的作用是返回一个新的函数,在这个新函数中使用`setTimeout`实现防抖,`throttle`函数的作用也是返回一个新的函数,在这个新函数中使用`setTimeout`实现节流。使用时,只需要将需要执行的回调函数和延迟时间传入这两个函数即可。