[翻訳] JavaScript でスロットルを使用したアニメーションを実装する

元記事リンク

---

JavaScript でのスロットルを使用したアニメーションの実装

このドキュメントでは、JavaScript でスロットルを使用してアニメーションのパフォーマンスを向上させる方法を説明し、スロットルを適用して途切れ途切れのスクロール アニメーションの問題を解決します。スロットル適用前と適用後の違いも比較します。

スロットルとは何ですか?

スロットルは、関数の呼び出しを「特定の時間間隔」内で「最大 1 回」に制限する手法です。つまり、イベントが短期間に複数回発生した場合でも、その関数はスロットルで設定された時間間隔内で 1 回だけ実行されます。たとえば、関数のスロットルが 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);
    };
}, []);

このコードでは、wheel イベントが発生するたびに 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 を使用して 16 ミリ秒後に window.scrollBy 関数が実行されます。
• setTimeout コールバック関数内で、throttleTimer が null に設定され、スロットルがリセットされ、遅延後に関数を再度呼び出せるようになります。

3. 改善の可能性

• setTimeout の初期遅延

  setTimeout は、スロットル メカニズムを実装するために使用されます。 setTimeout は、指定された遅延 (この場合は 16 ミリ秒) の後 にコールバック関数を実行します。したがって、最初のホイール イベントが発生すると、16 ミリ秒の遅延の後に window.scrollBy が呼び出されます。この最初の遅延は、即時の応答性の欠如を認識させる可能性があり、特に急速な車輪の動きの場合には、吃音として解釈される可能性があります。 (今後さらなる改善を検討していきます...)

以上が[翻訳] JavaScript でスロットルを使用したアニメーションを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。