实现一个函数 throttle(fn, delay)，对函数进行节流处理

推荐答案

// www.javascriptcn.com code example
function throttle(fn, delay) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}

本题详细解读

1. 节流的概念

节流（throttle）是一种限制函数执行频率的技术。它确保在一定时间间隔内，函数最多只执行一次。这在处理频繁触发的事件（如滚动、窗口调整大小等）时非常有用，可以避免过多的函数调用导致性能问题。

2. 实现思路

• 记录上次执行时间：使用一个变量 lastTime 来记录函数上次执行的时间。
• 判断时间间隔：每次调用函数时，检查当前时间与上次执行时间的差值是否大于或等于设定的延迟时间 delay。
• 执行函数：如果时间间隔满足条件，则执行函数，并更新 lastTime 为当前时间。

3. 代码解析

• lastTime：初始值为 0，表示函数从未执行过。
• now：获取当前时间戳。
• if (now - lastTime >= delay)：判断当前时间与上次执行时间的差值是否大于或等于 delay。
• fn.apply(this, args)：使用 apply 方法调用原函数，并传递正确的 this 和参数。
• lastTime = now：更新 lastTime 为当前时间，以便下次调用时使用。

4. 使用场景

• 滚动事件：在用户滚动页面时，限制某些操作的执行频率。
• 窗口调整大小：在用户调整窗口大小时，限制某些布局调整操作的执行频率。
• 按钮点击：防止用户快速点击按钮时触发多次操作。

5. 注意事项

• this 绑定：在返回的函数中使用 fn.apply(this, args) 确保原函数的 this 上下文正确。
• 参数传递：使用 ...args 收集所有参数并传递给原函数，确保参数传递正确。