Throttle (スロットル)
スロットリングとは、元々は障害物を使用して流体の流量を減速させるということでした。プログラミングの文脈では、操作が一定の速度でしか実行できないようにプロセスを減速させることを指します。
スロットリングはデバウンス処理とよく似ています。 両者の主な違いは、呼び出しが連続して発生した場合、スロットリングでは操作を確実に最大レートで実行し続けるのに対し、デバウンス処理では呼び出しが一定の時点まで停止するまで無期限に待つという点です。
スロットリングの典型的な使用例は、常に更新されている別の状態と同期する場合です。 例えば、scroll
イベントを監視する関数 onScrolled
を考えてみましょう。scroll
イベントは、ピクセルがスクロールされるたびに発行される可能性があるため、関数は非常に短い間隔で呼び出されることになります。onScrolled
の計算に時間がかかる場合、早い段階で呼び出されると、時間通りに後で呼び出されることがブロックされたり、その間にも他のことが実行できなくなる可能性があり、目に見えて動作がぎこちなくなる可能性があります。この場合、onScrolled
を調整して、10 ミリ秒に 1 回だけ呼び出されるようにすることができます。
- 最初の
onScrolled
への呼び出しは、先端 (leading edge) と呼ばれます。 - 次に
onScrolled
を呼び出すたびに、最初の呼び出しから 10 ミリ秒以内であれば、最初の呼び出しと同じ「バッチ」に含めます。 - 最後の
onScrolled
呼び出しから 10 ミリ秒が経過し、その後にもう呼び出されていない場合、指定された終端 (trailing edge) に達しました。
通常、onScrolled
は先端で一度だけ実行されますが、特定の用途によっては終端で実行される場合や、両端で実行される場合もあります。両端で実行される場合、通常、スロットリングの実装により、次の先端での呼び出しが前回の後端で発行された後、少なくとも 10 ミリ秒間は発生しないよう保証されます。
スロットリングにより、例えば、文書内のスクロール位置に基づいて別の DOM 要素を移動させる場合、ページがスクロールしている間、その DOM 要素は継続的に移動し続けますが、必要以上に頻繁に実行されることはありません。
ネットワークスロットリングとは、一度に転送できるデータ量を制限することで、低速のネットワーク接続をシミュレートすることを意味します。タイマースロットリングとは、タイマーの精度を粗くして、タイマー(Date.now()
など)を読み取る際に、タイマーの値は一定の最大速度でしか変化しないようにすることを意味します。 どちらも、スロットリングという一般的な概念の特定のアプリケーションです。
関連情報
- 用語項目:
- Debouncing and Throttling Explained Through Examples (CSS-Tricks, April 6, 2016)