クイックヒント：スクロールイベントをスロットルする方法

キーポイント

• スクロールイベントを聴くと、ブラウザがスクロールするたびにコールバック関数が実行されるため、パフォーマンスの劣化が発生します。スロットルは、特定の時間間隔でイベントの一定の流れを保証しますが、脱線は一連のイベントを単一のイベントに組み合わせます。
JavaScriptでのイベントスロットリングの実装は複雑になる可能性があり、イベントスロットリングの標準であるLodashのようなサードパーティの実装を使用することをお勧めします。 Lodashのスロットリング関数は、ローリングイベントスロットリングを簡素化し、コールバック関数がイベントの前面および/またはバックエッジで実行されるかどうかを判断するオプションを提供します。
スロットリングとデバウンスを選択するための鍵は、解決すべき問題の性質を確認することです。スロットルは、スクロールなどの特定の期間内に発生するイベントに適用されますが、デバウンスはイベント間の間隔が重要ではないキープレスなどのイベントに適用されます。

この記事は、Vildan SofticとJulian Motzによってレビューされました。 SitePointコンテンツを最高の状態にしてくれたすべてのSitePointピアレビュアーに感謝します！ スクロールイベントを聴くことの危険の1つは、パフォーマンスの劣化です。ブラウザは、ユーザーがスクロールするたびにコールバック関数を実行し、1秒あたり多くのイベントが可能になります。コールバック関数が多くのRedRaw操作を実行する場合、これはエンドユーザーにとって悪いニュースを意味します。特に、スクロールイベントが発生したときなど、ほとんどのビューを再描画する場合、再描画は高価です。

次の例は、この問題を示しています：

codepenの例を見る：スクロールイベントを解除する

パフォーマンスの劣化と発作の傾向に加えて、。この例は、コンピューターがあなたの指示に正確に従っているときに何が起こるかを示しています。背景の色の間にスムーズな遷移はありません。画面は点滅するだけです。不幸なプログラマーは、この世界には希望がないと感じるかもしれません。良い方法はありませんか？

標準イベント

1つの解決策は、イベントを延期し、一度に複数のイベントを管理することです。これを行うのに役立つ2つの一般的に使用される関数があります：スロットリングとデバウンス。

Trustは、特定の時間間隔にわたって一定のイベントの流れを保証し、一連のイベントを1つのイベントに組み合わせることができます。考え方の1つは、スロットリングは時間に基づいているのに対し、デバウンスはイベントに基づいているということです。スロットルは実行されることが保証されていますが、パケットが発生した後にデジターが実行されることは保証されていません。これについてもっと知りたい場合は、脱線とスロットルに関するこの詳細な議論をご覧ください。

de-shaking

debounceは、ajaxのボタンなど、さまざまな問題を解決します。フォームで何かを入力するときに、各キープレスのリクエストを送信するのはなぜですか？よりエレガントなソリューションは、一連のキーを1つのイベントに組み合わせて、AJAXリクエストをトリガーすることです。これは、タイピングの自然なプロセスに準拠し、サーバーリソースを保存します。キープレスの場合、ユーザーが一定の速度で入力しないため、イベント間の間隔は重要ではありません。

trust

debounceの保証はないため、別の方法はローリングイベントをスロットルすることです。スクロールは特定の期間内に発生するため、スロットルするのが適切です。ユーザーがスクロールを開始したら、タイムリーな実行を確保する必要があります。

この手法は、ページの特定の部分にあるかどうかを確認するのに役立ちます。ページのサイズを考えると、コンテンツをスクロールするのに何秒もかかります。これにより、スロットリングは、特定の間隔で1回のみイベントをトリガーできます。イベントスロットリングにより、スクロールエクスペリエンスがスムーズになり、実行が確保されます。

以下は、ネイティブJavaScriptで書かれたシンプルなイベントスロットルです：

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

この実装は、関数が最初に呼び出される瞬間を追跡する時間変数を設定します。返された関数が呼び出されるたびに、待機中間が通過したかどうかをチェックし、もしそうなら、コールバックをトリガーして時間をリセットします。

codepenで例を見る：ネイティブJSスロットリングの実装<

ユーザーライブラリ

イベントスロットリングには多くの危険があり、自分で書くことはお勧めしません。独自の実装を書くのではなく、サードパーティの実装を使用することをお勧めします。

lodash

Lodashは、JavaScriptでのイベントスロットリングの事実上の基準です。このライブラリはオープンソースであるため、好きなようにコードを閲覧できます。利点は、ライブラリがモジュール式であるため、必要なものを入手できることです。

lodashのスロットリング機能を使用して、ローリングイベントスロットリングがシンプルになります：

これにより、入ってくるローリングイベントの急流が1000ミリ秒ごとに1回（1秒）に制限されます。

window.addEventListener('scroll', _.throttle(callback, 1000));

APIは、次のように最前線とバックエッジのオプションを提供します。

これらのオプションは、コールバック関数がイベントの前面および/またはバックエッジで実行されるかどうかを決定します。

ここでの問題の1つは、前面と背面の両方をfalseに設定した場合、コールバック関数が発射されないことです。フロントエッジをTRUEに設定すると、すぐにコールバック実行を開始してからスロットリングします。これにより、フロントエッジとトレイルエッジの両方をTRUEに設定すると、各間隔の実行が保証されます。

_.throttle(callback, 1, { trailing: true, leading: true });

Codepenでデモを表示：スロットルローリングイベント

ソースコードを見ると、Throttle（）がDebounce（）のラッパーであることが興味深いことがわかりました。スロットルは、異なるパラメーターのセットを通過して、目的の動作を変更するだけです。スロットルはMaxWaitを設定します。これは、この長い間待つと実行を保証します。実装の残りの部分は同じままです。

次のイベントスロットリングアドベンチャーで、Lodashがあなたのために良いと思うことを願っています！

結論

スロットリングとデバウンスの鍵は、解決する問題の性質を確認することです。これらの2つのテクノロジーは、異なるユースケースに適しています。答えを見つけるために、ユーザーの観点から質問を見ることをお勧めします。

Lodashを使用する利点は、単純なAPIで多くの複雑さを抽象化することです。良いニュースは、ライブラリ全体を追加せずにプロジェクトでを使用できることです。必要な関数を含むカスタムビルドのみを作成できるツールであるLodash-Cliがあります。イベントスロットリングは、ライブラリ全体のほんの一部です。

ローリングイベント（FAQ）

についてのFAQ

• JavaScriptでローリングイベントをスロットリングする目的は何ですか？

JavaScriptのトラストローリングイベントは、WebサイトまたはWebアプリケーションのパフォーマンスを最適化するために使用されるテクノロジーです。ユーザーがWebページでスクロールすると、ブラウザはピクセルの動きごとにスクロールイベントを生成します。これにより、1秒あたりに生成される数百または数千のイベントが発生する可能性があり、Webページのパフォーマンスを大幅に低下させる可能性があります。これらのイベントを絞ることにより、処理するイベントの数を制限し、それによりWebページのパフォーマンスと応答性を改善できます。

• JavaScriptでスロットリングはどのように機能しますか？

JavaScriptへの信頼は、イベント実行の間に遅延を設定することにより機能します。イベントがトリガーされると、タイマーが開始されます。タイマーが終了する前に別のイベントがトリガーされた場合、イベントは無視されます。これにより、別のイベントが処理されるまでに一定の時間が経過する必要があります。この手法は、イベントのスクロールなどの頻繁にトリガーされるイベントに特に役立ちます。

• スロットリングとデスシェイキングの違いは何ですか？

信頼とdebounceは、関数が時間の経過とともに実行できる回数を制限するために使用される手法です。 2つの主な違いは、レイテンシを処理する方法です。スロットルは、関数がxミリ秒ごとに1回以上呼び出されないことを保証しますが、debounceは、xミリ秒が最後の呼び出し以来経過するまで関数が呼び出されないことを保証します。言い換えれば、スロットリングは一定の間隔で関数を実行し、debounceは不活動の期間後に関数を実行します。

• JavaScriptでスロットリングを達成するにはどうすればよいですか？

関数を使用して、JavaScriptでスロットルできます。この関数を使用すると、指定された数ミリ秒単位で関数の実行を遅らせることができます。イベントリスナーを使用してsetTimeoutを使用することにより、イベントハンドラー機能がXミリ秒ごとに1回以上呼び出されないようにすることができます。 setTimeout

• イベントのスクロールに加えて、他のイベントでスロットリングを使用できますか？

はい、スロットリングは、イベントをスクロールするだけでなく、JavaScriptのあらゆるタイプのイベントで使用できます。これは、マウスの動きイベント、サイズ変更イベント、キープレスイベントなど、多くの場合、広範な処理をトリガーまたは必要とするイベントに特に役立ちます。

• スロットリングの組み込みサポートを提供するライブラリまたはフレームワークはありますか？

はい、スロットリングのサポートを組み込んだいくつかのライブラリとフレームワークがあります。たとえば、人気のJavaScriptユーティリティライブラリLodashは、スロットリングを簡単に実装できるスロットリング機能を提供します。同様に、人気のJavaScriptライブラリJQueryは、APIにスロットリング機能も提供します。

• スロットリングの潜在的な欠点は何ですか？

スロットリングはWebページのパフォーマンスを向上させることができますが、不適切に使用するとユーザーエクスペリエンスの応答が遅くなる可能性があります。たとえば、遅延が高すぎると、ユーザーは操作とWebページの応答との間に遅れていることに気付く場合があります。したがって、スロットリングを使用する場合、パフォーマンスと応答速度のバランスを見つけることが重要です。

• スロットリングの有効性をテストするにはどうすればよいですか？

スロットリングの前後にWebページのパフォーマンスを測定することにより、スロットリングの有効性をテストできます。これは、ブラウザー開発者ツールを使用して実行できます。これは、イベントの処理にかかる時間など、Webページのパフォーマンスに関する詳細な情報を提供します。

• スロットリングは、他のパフォーマンス最適化手法と組み合わせて使用​​できますか？

はい、スロットリングは、debounceやrequestAnimationFrameなどの他のパフォーマンス最適化手法と組み合わせて使用​​できます。これらのテクノロジーを組み合わせることで、Webページのパフォーマンスと応答性をさらに向上させることができます。

• スロットリングに代わるものはありますか？

はい、debounceやrequestAnimationFrameなど、スロットリングにはいくつかの選択肢があります。デバウンスはスロットリングに似ていますが、関数が時間の経過とともに呼び出される回数を制限する代わりに、最後の呼び出し以来特定の時間が経過するまで関数が呼び出されないようにします。 requestAnimationFrameは、ブラウザにアニメーションを実行するように指示するメソッドであり、ブラウザに指定された関数を呼び出して次の塗り直しの前にアニメーションを更新するように要求します。

以上がクイックヒント：スクロールイベントをスロットルする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。