デバウンスとスロットルをもう一度忘れないでください。視覚化 - Codepen が付属

これは、デバウンスまたはスロットリングがコード レベルでどのように機能するかを説明する単なる別の記事ではなく、実際に仕事で適用できるように、概念を覚えて視覚化するための図です。

個人的には、デバウンスとスロットリングの概念を忘れてしまうことが多いので、誰かに説明を求められたとき、またはインタビューで質問が出たとき、私はただ瞬きするだけです。それを避けるために、記憶をリフレッシュするための簡単なページを作成しました。詐欺師のように感じたくない場合は、フォローしてください?.

以下のコードペンでは、デバウンスとスロットルの両方の遅延を 2 秒に設定しています。ランダムな食品をクリックして、少し時間を置いてみてください。

索引

• レストランの例え
• 説明
  • そもそもなぜデバウンスやスロットルを行うのでしょうか?
  • JS イベントハンドラー
  • どうしたの?
  • デバウンス
  • スロットル

ページへのリンク

ashiqsultan.github.io

GitHub リンク

レストランのたとえ

レストランにいて、食べ物を注文したいと思って、テーブルからメニューを選び、すべての項目を読み始めるところを想像してください。 (私が共有したウェブページでは、さまざまな食品項目をクリックすることは、メニュー項目を読むことと同じです)

ここでの例え

• ?食品項目の読み取り = ?ボタンクリック
• ?‍?ウェイターがキッチンに行く = ? API 呼び出し

そして、レストランであなたにサービスを提供できる 3 つの異なるタイプのウェイターがいると想像してください。

1. ?‍♂️ 普通のウェイター

   • アイテムについて言及するたびにメモを取ります
   • アイテムごとにキッチンに走ります
   • すべてのイベントを即座に処理する JS のような

2. ?デバウンスされたウェイター

   • あなたがメニューを読み始めると、彼は注文を受ける前に少なくとも 2 秒間あなたを待っています。
   • API 呼び出しを行う前にユーザーの入力が完了するのを待つようなもの

3. ?‍?スロットルウェイター

   • 2 秒に 1 回のみ注文を受けます
   • 2 秒以内に複数の項目について言及すると、それらはすべて同じ順序で表示されます
   • ユーザーのアクティビティに関係なく、API 呼び出しを X 秒に 1 回に制限するなど

注: 主な違いは次のとおりです:

• デバウンス: 指定された時間アクティビティ (ボタンのクリック) が停止するのを待ってトリガーします
• スロットリング: アクティビティがいつ停止されたかに関係なく、定期的な間隔でトリガーされます
• また、2 秒は例として使用したものに過ぎず、任意の期間にすることができます

説明

そもそもなぜデバウンスやスロットルをするのでしょうか?

デバウンスやスロットルを理解する前に、そもそもなぜそれらが使用されるのかを知る必要があります。それを知るには、JS イベント ハンドラーの動作を理解しましょう

JS のイベント ハンドラー

JS では、イベント ハンドラーは、特定のイベント (クリック、入力、スクロールなど) が発生したときに実行される単なる関数です。 デフォルトでは、これらのハンドラーはイベントが発生するたびに起動します - すべてのキーストローク、すべてのクリック、またはスクロール動作。

// Basic event handler
button.addEventListener('click', function() {
    console.log('Button clicked!');
});

// Basic keystroke handler
input.addEventListener('keyup', function() {
    console.log('Key pressed!');
});

どうしたの？

たとえば、API 呼び出しを行うボタンがあるとします

function makeApiCall() {
  console.log("API call made");
}

button.addEventListener('click', () => {
  makeApiCall();
});

上記の関数は、ボタンがクリックされるたびに makeApiCall() を実行します (つまり) 1 秒以内にボタンを 10 回押すことができたら、1 秒間に 10 回 API 呼び出しを行ったことを推測してください。 これこれはデフォルトの動作です。

しかし、イベントに対して毎回 API 呼び出しを実行するのは非効率である可能性があり、ほとんどの場合、これは求めているものではありません。ここで、スロットリングとデバウンスが重要になります。

この記事から定義を取り除きたい場合は、これがその定義です。 スロットリングとデバウンスは、イベント リスナーの応答速度を制御する 2 つの最も一般的な方法です。

デバウンス

デバウンスのコードは lodash からインポートできるため説明しません。むしろ、実際にどこで使用できるかを見ていきます。

ユーザーが一定時間入力を停止した場合、または一定時間クリックを停止した場合にのみ API 呼び出しを行う場合は、デバウンシングを使用します。

この例では、ユーザーが 5 分間連続でボタンをクリックし続けた場合、API 呼び出しは 1 回だけ行われます。

ここでは 2 つのことが起こっています:

• ユーザーはクリックを止める必要があります。
• クリックをやめるとは、少なくとも 2 秒間はボタンをクリックしないことを意味します。

スロットル

スロットルはインターバルのようなものです。ユーザーが停止するまで待ちたくない場合、たとえば 2 秒ごとに API 呼び出しを行う場合にこれを使用します

たとえば、ユーザーが一時停止せずに 1 分間続けて入力している場合、2 秒ごとに API を呼び出すことになります。

結論

記事で述べたように、これは関数がどのように機能するかを説明するものではなく、関数が使用される理由を視覚化して理解することを目的としています。これらがどのように機能するかをコードレベルで理解することをお勧めしますが、個人的には、車輪の再発明ではなく、lodash ライブラリが提供するデバウンスとスロットルを引き続き使用することをお勧めします。

この記事が気に入っていただけましたら、高評価を残していただけると、さらに書く意欲が高まります。ありがとう ？。

以上がデバウンスとスロットルをもう一度忘れないでください。視覚化 - Codepen が付属の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。