[翻譯] 在 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中文網其他相關文章！