JavaScript节流函数实现详解

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript节流实现方法解析》，聊聊，我们一起来看看吧！

节流的核心是控制函数执行频率，确保在设定周期内最多执行一次。1. 通过setTimeout实现节流，利用定时器延迟执行，若在延迟时间内重复调用则更新参数或忽略；2. 使用requestAnimationFrame优化动画性能，使回调与浏览器刷新率同步，提升流畅度；3. 节流与防抖不同，前者限制执行频率，适用于滚动、窗口调整等持续响应场景，后者等待事件停止后才执行，适合搜索框输入、表单验证等完成性操作；4. 实现时需注意this上下文和参数的传递，避免丢失原始调用信息；5. 可选“立即执行”逻辑，在首次调用时即触发函数，再进入冷却期；6. 提供cancel方法用于清除待执行定时器，防止内存泄漏。

节流的核心，在于控制函数执行的频率，确保在设定的时间周期内，函数最多只执行一次。在JavaScript中，这通常通过事件循环机制，特别是利用setTimeout或requestAnimationFrame来延迟函数的实际调用，从而达到限制执行频率的目的。简单来说，就是给函数调用加个“冷却时间”。

解决方案

实现节流，最常见也最实用的方法就是基于setTimeout。它的基本思路是：当一个函数被频繁调用时，我们不是每次都立即执行它，而是设置一个定时器。如果在定时器设定的时间内函数再次被调用，我们就不理会它，或者更新定时器。等定时器执行了，我们再清除它，并允许下一次调用重新设置定时器。

我个人在工作中，处理高频事件，比如窗口resize、页面滚动、鼠标移动时，节流几乎是我的首选优化手段。它能有效降低CPU的负担，让页面响应更流畅。

这是一个基本的节流函数实现，它会确保在指定延迟时间内，函数只在“冷却时间”结束后执行一次（也就是所谓的“尾部执行”）：

function throttle(func, delay) {
    let timeoutId = null; // 用于存储定时器ID
    let lastArgs = null;  // 存储最后一次调用的参数
    let lastThis = null;  // 存储最后一次调用的this上下文

    return function(...args) {
        lastArgs = args;
        lastThis = this;

        // 如果没有正在进行的定时器，就设置一个
        if (!timeoutId) {
            timeoutId = setTimeout(() => {
                // 定时器触发时，执行被节流的函数
                func.apply(lastThis, lastArgs);
                // 执行完毕后，清除定时器ID，允许下一次调用设置新的定时器
                timeoutId = null;
                // 清空参数和上下文，避免内存泄漏或意外引用
                lastArgs = null;
                lastThis = null;
            }, delay);
        }
        // 如果有正在进行的定时器，则不执行任何操作，等待当前周期结束
    };
}

// 示例用法：
// const handleScroll = throttle(() => {
//     console.log('滚动事件触发，但被节流了！', Date.now());
// }, 200); // 每200毫秒最多执行一次

// window.addEventListener('scroll', handleScroll);

这个版本确保了在节流周期内，即使函数被多次调用，最终也会执行一次，并且是使用最后一次调用的参数和this上下文。对于很多场景，比如滚动加载，这种“尾部执行”的行为是比较理想的。

节流与防抖：何时选择，如何区分？

说实话，我刚开始学习前端的时候，节流（throttle）和防抖（debounce）这两个概念总是让我有点混淆。它们确实都是为了优化高频事件处理，但目的和行为逻辑完全不同。

节流，就像我上面提到的，它是一种“限速”机制。想象一下，你有一个水龙头，不管你拧多快，它每秒钟最多只能流出一定量的水。这就是节流：它限制了函数在单位时间内的执行次数。它确保函数以一个固定的频率被调用，而不是在每次事件发生时都调用。

而防抖呢，它更像是一种“等待稳定”的机制。比如，你输入搜索框，你每敲一个字，系统就想去搜索一次。如果每次都搜索，那服务器压力就大了。防抖的策略是：当你停止输入一段时间（比如300毫秒）后，才执行搜索操作。也就是说，它会延迟函数的执行，直到事件停止触发一段时间后才执行。如果在延迟时间内事件再次触发，那么之前的延迟就会被取消，重新开始计时。

简单总结就是：

• 节流 (Throttle): 确保函数在特定时间间隔内只执行一次。适用于需要持续响应但又不能过于频繁的场景，如滚动加载、窗口调整大小。
• 防抖 (Debounce): 确保函数在事件停止触发一段时间后才执行一次。适用于需要等待用户操作“完成”的场景，如搜索框输入、按钮点击提交（避免重复提交）。

选择哪个，完全取决于你的业务需求。如果我需要一个持续的、平滑的响应，比如拖拽、动画更新，我会选节流。如果我需要等待用户完成某个操作，比如表单输入验证，那我肯定会用防抖。

利用requestAnimationFrame实现节流，优化动画性能

当涉及到浏览器动画或者DOM操作时，setTimeout的节流有时会显得不够“平滑”。这是因为setTimeout的执行时机并不总是和浏览器绘制帧的节奏完全同步。浏览器通常以每秒60帧（FPS）的速度进行渲染，这意味着每隔约16.6毫秒会绘制一帧。如果你的setTimeout回调在帧绘制过程中执行，可能会导致视觉上的卡顿或不流畅。

这时候，requestAnimationFrame就派上用场了。它是一个专门为动画设计的API，它会告诉浏览器——“嘿，我想在下一次浏览器重绘之前执行这个函数”。这意味着你的代码会在浏览器最合适的时机执行，从而获得更流畅的动画效果。

所以，如果我的节流是用于优化动画、滚动效果或任何视觉更新，我更倾向于使用requestAnimationFrame。

function throttleRAF(func) {
    let ticking = false; // 标记是否已经安排了下一次动画帧
    let lastArgs = null;
    let lastThis = null;

    return function(...args) {
        lastArgs = args;
        lastThis = this;

        // 如果还没有安排动画帧，就安排一个
        if (!ticking) {
            requestAnimationFrame(() => {
                // 在动画帧中执行函数
                func.apply(lastThis, lastArgs);
                // 执行完毕后，重置标记，允许下一次安排
                ticking = false;
                lastArgs = null;
                lastThis = null;
            });
            ticking = true; // 标记为已安排
        }
    };
}

// 示例用法：
// const handleMouseMove = throttleRAF((event) => {
//     console.log('鼠标位置：', event.clientX, event.clientY);
// });

// document.addEventListener('mousemove', handleMouseMove);

这个throttleRAF函数确保了你的回调函数只会在每个动画帧中最多执行一次。它没有像setTimeout那样显式的delay参数，因为它天然地与浏览器的刷新率同步。这对于提升用户体验，尤其是那些对视觉流畅度要求很高的场景，效果非常显著。

节流函数实现中的常见陷阱与考量

在实际编写和使用节流函数时，我遇到过一些小坑，也总结了一些值得考量的地方。

一个常见的陷阱是this上下文和参数的丢失。你看我上面的代码，特意用了lastThis = this;和func.apply(lastThis, lastArgs);。如果直接在setTimeout的回调里调用func()，那么this指向的就不是原始调用时的上下文了，而是全局对象（在非严格模式下）或undefined（在严格模式下）。参数也同理，需要显式地传递。这是JavaScript闭包和this指向的经典问题，对于节流函数来说尤其重要，因为你希望被节流的函数行为和它直接调用时一样。

另一个考量是“立即执行”的需求（leading edge）。我上面给出的setTimeout版本是“尾部执行”的，也就是说，你第一次调用节流函数时，它不会立即执行，而是等待delay时间后才执行。但在某些场景下，你可能希望第一次调用是立即执行的，然后才开始计算冷却时间。比如，一个按钮点击事件的节流，你肯定希望第一次点击是立即响应的。

实现“立即执行”的逻辑，通常需要一个额外的变量来标记是否是第一次调用，或者上一次执行的时间。

function throttleWithLeading(func, delay) {
    let timeoutId = null;
    let lastArgs = null;
    let lastThis = null;
    let lastExecTime = 0; // 记录上次执行的时间

    return function(...args) {
        const now = Date.now();
        lastArgs = args;
        lastThis = this;

        // 如果距离上次执行时间已经超过了delay，或者这是第一次执行
        if (now - lastExecTime > delay) {
            func.apply(lastThis, lastArgs);
            lastExecTime = now; // 更新上次执行时间
        } else if (!timeoutId) {
            // 如果不能立即执行，并且没有定时器在运行，就设置一个尾部执行的定时器
            timeoutId = setTimeout(() => {
                func.apply(lastThis, lastArgs);
                lastExecTime = Date.now(); // 更新上次执行时间
                timeoutId = null;
                lastArgs = null;
                lastThis = null;
            }, delay - (now - lastExecTime)); // 计算剩余需要等待的时间
        }
    };
}

这个版本就稍微复杂一些，它兼顾了“头部立即执行”和“尾部最终执行”的需求。

最后，还有清除节流函数的能力。有时候，你可能需要在某个时刻停止节流，比如组件卸载时。一个完善的节流函数可能会提供一个cancel方法，用来清除任何待执行的定时器，避免内存泄漏或不必要的执行。这在大型应用中，对于资源管理和组件生命周期控制，是非常有用的。但对于大多数简单的场景，可能就不那么必要了。

今天关于《JavaScript节流函数实现详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！