[翻译] 在 JavaScript 中使用 Throttle 实现动画

原文链接

---

在 JavaScript 中使用 Throttle 实现动画

本文档介绍了如何在 JavaScript 中使用节流阀来提高动画性能，并应用节流阀来解决滚动动画不稳定的问题。它还比较了应用油门之前和之后的差异。

什么是油门？

节流是一种限制函数在“特定时间间隔”内“最多调用一次”的技术。换句话说，即使某个事件在短时间内发生多次，该函数在节流阀设定的时间间隔内也只会执行一次。例如，如果某个函数的节流为 100ms，即使该事件在 1 秒内发生 10 次，该函数最多也会执行 10 次（间隔 100ms）。

油门用在哪里？

油门可以在以下情况下使用：

• 防止过多的事件触发导致性能下降： 当滚动、鼠标移动、窗口大小调整等事件在短时间内频繁发生时，事件处理程序可能会过度执行，从而导致性能问题。节流阀用于缓解这种情况。
• 使动画更流畅： 当需要表达连续变化时，例如滚动动画，根据事件频率，动画可能会出现断断续续或卡顿的情况。使用油门可以使动画更加流畅。

问题：滚动动画卡顿和断断续续

尝试根据滚轮事件实现平滑的滚动动画，但在应用油门之前，动画出现断断续续的情况。

原因：这是因为wheel事件发生频率非常高，导致window.scrollBy函数被过度调用，导致浏览器无法处理所有请求。

比较

1. 应用节流之前的代码

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

在这段代码中，每次发生滚轮事件时都会执行handleWheel函数。该函数使用事件的 deltaY 值计算滚动量，并通过调用 window.scrollBy 函数进行滚动。问题在于，wheel 事件会在很短的时间内发生多次，导致 window.scrollBy 被过度调用，导致动画断断续续。

2. 应用节流后的代码

useEffect(() => {
    const container = scrollContainerRef.current;
    if (!container) return;

    const handleWheel = (event) => {
        event.preventDefault();

        window.scrollBy({
            left: event.deltaY,
            behavior: 'smooth'
        });
    };

    container.addEventListener('wheel', handleWheel);

    return () => {
        container.removeEventListener('wheel', handleWheel);
    };
}, []);

在节流代码中，throttleTimer 变量用于管理函数执行。该过程的工作原理如下：

• 当handleWheel函数被调用时，它会检查throttleTimer是否存在。
• 如果throttleTimer存在（意味着之前设置的计时器仍然有效），该函数立即返回。这可以防止在滚动动画正在进行时处理新的滚动请求。
• 如果throttleTimer不存在，则调用event.preventDefault()来阻止默认的滚动行为，并使用setTimeout在16ms后执行window.scrollBy函数。
• 在 setTimeout 回调函数中，throttleTimer 设置为 null，重置油门并允许延迟后再次调用该函数。

3. 潜在的改进

• setTimeout 的初始延迟

  setTimeout用于实现限流机制。 setTimeout 在指定的延迟（本例中为16毫秒）后执行回调函数。因此，当第一个滚轮事件发生时，window.scrollBy 在 16ms 延迟后被调用。这种最初的延迟可能会导致感觉缺乏即时响应能力，可能被解释为口吃，特别是在车轮快速移动时。 （未来将探讨进一步的改进...）

以上是[翻译] 在 JavaScript 中使用 Throttle 实现动画的详细内容。更多信息请关注PHP中文网其他相关文章！