如何改进这个 `throttle` 函数以更好地保持闭包作用域?
时间: 2024-09-26 08:18:52 浏览: 39
详解JavaScript节流函数中的Throttle
为了更好地保持闭包作用域,避免在 `setTimeout` 回调中 `fn` 执行时的 `this` 错误,我们可以使用箭头函数(`=>`),因为箭头函数会捕获其所在上下文(即定义它的函数的上下文),而不是创建自己的 `this`。下面是改进后的 `throttle` 函数:
```javascript
function throttle(fn, time) {
let timer = null;
return (function throttled() {
if (!timer) {
timer = setTimeout(() => {
fn.apply(this, arguments);
timer = null;
}, time);
}
console.log(timer, '定时器状态');
}).bind(this); // 添加这行确保每次调用都是在正确的上下文中执行
}
```
在这个版本中,我们添加了 `.bind(this)`,它将 `throttled` 内部的匿名函数绑定到 `throttle` 函数的 `this` 上,这样无论何时 `throttle` 被调用,`fn` 的 `this` 都会被正确地设置。
阅读全文