js 节流
时间: 2023-07-12 08:08:32 浏览: 75
节流(throttle)是一种优化高频率执行代码的技术,它可以控制一个函数在一定时间内执行的次数。比如,当用户频繁触发一个事件时,我们可以利用节流技术来限制函数调用的频率,避免页面的卡顿或者浏览器的崩溃。
以下是一个基于 JavaScript 的节流函数的实现:
```javascript
function throttle(fn, delay) {
let timer = null;
return function () {
const context = this;
const args = arguments;
if (!timer) {
timer = setTimeout(function () {
fn.apply(context, args);
timer = null;
}, delay);
}
}
}
```
这个函数接收两个参数:要节流的函数和时间间隔。它会返回一个新的函数,这个新函数会在指定的时间间隔内最多执行一次。如果在这个时间间隔内再次触发函数,它会被忽略,直到上一个函数执行完毕。
使用这个函数很简单,只需要将需要节流的函数和时间间隔作为参数传入即可。例如:
```javascript
function handleScroll() {
console.log('scrolling');
}
window.addEventListener('scroll', throttle(handleScroll, 1000));
```
这个例子中,我们将 `handleScroll` 函数传入 `throttle` 函数,并指定时间间隔为 1000ms。然后将返回的新函数添加到了 `window` 对象的 `scroll` 事件监听器上。这样,当用户滚动页面时,`handleScroll` 函数最多只会在每个 1000ms 的时间间隔内执行一次,从而优化了代码的执行效率。