如果fn参数传的是个箭头函数,你上面写的节流代码中还需要fn.apply吗
时间: 2024-02-23 17:02:12 浏览: 22
如果 `fn` 参数传递的是箭头函数,就不需要使用 `apply` 方法来执行函数了,因为箭头函数没有自己的 `this`,它会继承父级作用域的 `this`。所以,在箭头函数中,`this` 的值就是在返回的函数中手动设置的 `this` 值。
修改后的代码如下:
```javascript
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastTime >= delay) {
fn(...args);
lastTime = now;
}
}
}
```
这个节流函数与之前的版本基本相同,只是将 `fn.apply(this, args)` 修改为 `fn(...args)`,这样就可以直接调用箭头函数了。
相关问题
手写节流函数
节流函数可以帮助我们在某些频繁触发的事件中减少触发次数,以提高性能和用户体验。下面是一个简单的手写节流函数实现:
```javascript
function throttle(fn, delay) {
let lastTime = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastTime >= delay) {
fn.apply(this, args);
lastTime = now;
}
}
}
```
该函数接受两个参数:要执行的函数 `fn` 和延迟时间 `delay`。返回一个新函数,该函数在一定时间内只会执行一次原函数 `fn`。
具体实现是在新函数内部维护一个 `lastTime` 变量,记录上一次执行 `fn` 的时间。每次调用新函数时,先计算当前时间与上次执行时间的时间差,如果大于等于 `delay`,则执行 `fn` 并更新 `lastTime` 为当前时间。否则不执行 `fn`。
使用示例:
```javascript
function handleScroll() {
console.log('scrolling...');
}
window.addEventListener('scroll', throttle(handleScroll, 1000));
```
上述代码将会在滚动事件触发后的 1 秒内最多执行一次 `handleScroll` 函数,以此来减少触发次数。
用typescript写一个节流函数
以下是用 TypeScript 写的一个基本节流函数:
```typescript
type ThrottleFn = (...args: any[]) => void;
function throttle(fn: ThrottleFn, delay: number): ThrottleFn {
let timeoutId: number | null = null;
return function(this: any, ...args: any[]) {
const context = this;
if (!timeoutId) {
timeoutId = window.setTimeout(() => {
fn.apply(context, args);
timeoutId = null;
}, delay);
}
};
}
```
该函数接收一个函数和延迟时间作为参数,并返回一个新函数。新函数在被调用后会等待指定的延迟时间后再调用原函数,而在这段延迟时间内,若再次调用该函数,则不会执行原函数,从而实现了函数节流的效果。