JavaScript のアンチシェイクとスロットリングの違いと実装

JavaScript のアンチシェイクとスロットリングの違いと実装

序文:

フロントエンド開発者には、次の 2 つの要件があります。

(1)検索要件

検索ロジックは、ユーザー入力イベントを監視し、ユーザー入力が完了した後にデータをバックエンドに送信し、バックエンドが一致するデータを返し、フロントエンドがページにデータを表示することです。ユーザーが入力するとすぐにリクエストが送信されると、バックエンドにリクエストの負荷がかかるため、リクエストの頻度を制御する必要があります。

(2)ページがデータを無限に読み込む

ページにデータを無限に読み込むロジックは、ユーザーのスクロール イベントを監視し、ユーザーのスクロール中にページに表示する次のページのデータを要求することです。スクロールしている間はリクエストが送信されるため、バックエンドのリクエストにも負荷がかかるため、リクエストの頻度を制御する必要があります。

上記 2 つはリクエスト頻度の制御の問題のように見えますが、要件が少し異なります。検索は、ユーザーが入力で複数回入力する場合であり、ユーザーが短時間入力を停止した後にのみリクエストが送信されます。このとき、それを実現するには手ぶれ補正が必要です。スクロールデータの読み込みとは、ユーザーがページをスクロールしている間、一定の間隔でデータを要求することを意味します。ユーザーがスクロールを続けている場合でも、ユーザーがスクロールを停止するのを待つのではなく、要求が行われます。この場合、これを実現するにはスロットリングが必要です。

1. 手ぶれ補正

意味:

簡単に理解すると、ユーザーがイベントを複数回トリガーした場合、ユーザーがイベントをトリガーし続けている間はイベントは実行されません。ユーザーが一定期間イベントのトリガーを停止すると、イベントは 1 回だけ実行されます。

成し遂げる:

// @fn は対応するリクエストデータです // @ms はユーザーによるイベントの複数のトリガー間の時間間隔(ミリ秒単位) function debounce(fn, ms) {
        タイムアウト = null にする
        関数()を返す{
            clearTimeout(タイムアウト)
            タイムアウト = setTimeout(() => {
                fn.apply(これ、引数)
            }、 MS)
        }
    }

原理:

ユーザーがイベントをトリガーするたびに、実行が遅延されます。遅延タイマーを設定する前に、以前の遅延タイマーがクリアされます。最後に、連続したユーザートリガー間の間隔が、設定したパラメータmsミリ秒を超えた場合にのみ、イベントがトリガーされます。

テスト:

<input id="検索入力"/>
    関数 getData(){
        console.log('リクエストを送信しています...')
    }
    document.getElementById('searchInput').oninput = debounce(getData, 800)
    // ユーザーが入力を続けると、リクエストは送信されません // ユーザーの連続入力間隔が 800 ミリ秒を超えた場合にのみデータが要求されます。つまり、ユーザーが 800 ミリ秒以内に入力しない場合にのみデータが要求されます

2. スロットリング

意味:

簡単に理解する方法は、ユーザーがイベントを複数回トリガーし、ユーザーがイベントをトリガーし続けると、イベントが一定の間隔で 1 回実行され、複数回実行されるというものです

成し遂げる:

    // @fn は対応するリクエストデータです // @ms はユーザーによってトリガーされた複数のイベント間の時間間隔(ミリ秒単位)です function throttle(fn, ms){
        フラグを true にする
        関数()を返す{
            if(!フラグ) 戻り値
            フラグ = 偽
            タイムアウトを設定します(()=>{
                fn.apply(これ、引数)
                フラグ = true
            }、 MS)
        }
    }

原理:

ユーザーがイベントをトリガーするたびに、遅延タイマーが設定されます。ただし、遅延タイマーが設定されている場合は、前の遅延タイマーが実行されるまで次のタイマーは開始されません。このように、ユーザーはイベントをトリガーし続け、イベントは一定期間ごとに 1 回実行されます。

テスト:

関数 getData(){
        console.log('リクエストを送信しています...')
    }
    window.onscroll = スロットル(getData, 800)
    // ユーザーがスクロールしている間、一定間隔でデータを要求します

3. まとめ

スロットリングとアンチシェイクは、基本的にイベント実行の頻度を制御することですが、イベントをトリガーするタイミングは本質的に異なります。アンチシェイクは、ユーザーがイベントを複数回トリガーし、ユーザーがイベントのトリガーを停止すると、イベントが 1 回実行されます。一方、スロットリングは、ユーザーがイベントを複数回トリガーし、複数のトリガー プロセス中に間隔を置いてイベントが実行される場合です。

JavaScript手ぶれ補正とスロットリングの違いと実装についての記事はこれで終わりです。手ぶれ補正とスロットリングの違いと実装についての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript 関数のスロットリングとデバウンス
  • JavaScript デバウンス関数の詳細な説明
  • Javascript スロットル関数とデバウンス関数
  • JavaScriptのアンチシェイクとスロットリングとは
  • jsのアンチシェイクスロットリングについて詳しく説明します
  • JavaScript デバウンスとスロットリング

<<:  JDカルーセル効果を実現するための純粋なHTMLとCSS

>>:  Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

推薦する

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

Dockerコンテナ起動時に固定IPを設定する実装

Dockerインストール後のネットワークタイプ [root@insure updev]# docke...

js を使用して年カルーセル選択効果をネイティブに実装する例

序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...

Windows システムの MySQL が中国語を入力および表示できない問題の解決方法

ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...

Linux での Redis の永続性、マスター スレーブ同期、Sentinel の詳細な説明

1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...

Vueは複数のカウントダウンを同時に設定する機能を実装しています

この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...

Vueデータプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

クラスタrpmを使用してMySQLをインストールするための詳細な手順

MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...

Tomcat のパフォーマンス最適化のための Apr モジュールの構築方法

序文Tomcat は、無数のチューニング オプションを備えた、広く使用されている Java Web ...

Nginx プロキシ使用時にヘッダーに「_」が含まれることで情報が失われる問題の解決方法

序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...

背景とリンクとして画像を書き込む方法(背景画像+リンク)

写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...

React-Dropzone をベースにアップロードコンポーネント機能を開発する (サンプルデモ)

今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...

HTML ドロップダウン ボックスの SELECT オプションを変更する複数の方法

フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの...

アクセス速度を上げるためにウェブサイトを最適化する方法の更新

最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...