手写javascript节流函数,并做出解释
时间: 2024-05-08 21:17:39 浏览: 63
js代码-手写节流函数
节流函数可以限制函数在一定时间内执行的次数,以防止频繁触发函数而导致性能问题。以下是一个手写的javascript节流函数:
```
function throttle(func, delay) {
let lastTime = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
}
}
```
该函数接受两个参数:需要执行的函数和执行的时间间隔(单位为毫秒)。它返回一个新的函数,该函数内部维护了一个 `lastTime` 变量表示上次执行的时间,每次执行时会判断当前时间与上次执行时间的差值是否大于等于时间间隔,如果是则执行函数并更新 `lastTime` 变量。
例如,如果我们需要限制一个按钮的点击事件在1秒内只能执行一次,那么可以这样使用节流函数:
```
const button = document.querySelector('button');
button.addEventListener('click', throttle(function() {
console.log('clicked');
}, 1000));
```
这样,无论用户点击按钮多少次,该函数都只会在1秒内执行一次,避免了不必要的性能开销。
阅读全文