js如何实现防抖和节流
时间: 2024-02-22 09:51:25 浏览: 81
JS实现防抖和节流的方法如下:
1. 防抖:在一定时间内,只执行最后一次触发事件的回调函数。实现方法是使用setTimeout函数,在事件触发后设定一个定时器,如果在定时器时间内再次触发事件,则清除之前的定时器并重新设定一个新的定时器。如果在定时器时间内没有再次触发事件,则执行回调函数。
2. 节流:在一定时间内,只执行一次触发事件的回调函数。实现方法是使用时间戳,在事件触发时记录当前时间戳,如果当前时间戳与上一次触发事件的时间戳的差值大于等于设定的时间间隔,则执行回调函数并更新上一次触发事件的时间戳。
具体实现代码如下:
1. 防抖:
```
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
}
}
```
2. 节流:
```
function throttle(func, delay) {
let lastTime = 0;
return function() {
const context = this;
const args = arguments;
const nowTime = Date.now();
if (nowTime - lastTime >= delay) {
func.apply(context, args);
lastTime = nowTime;
}
}
}
```
阅读全文