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 つの理由のまとめ

推薦する

モバイル ブラウザのビューポート パラメータ (Web フロントエンド デザイン)

モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...

HTMLがHikvisionカメラのリアルタイム監視機能を実現

最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...

nginx を使用して wgcloud へのアクセスを構成する方法

nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...

ページ要素の絶対位置と相対位置に関するある程度の理解

今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...

HTML ウェブページにおけるさまざまなフォント形式の詳細

このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォン...

Windows での MySQL 5.7.18 インストール チュートリアル

この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...

HTML CSS の 3 つの一般的なスタイル セレクター

1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...

Vue2/vue3 ルーティング権限管理方法の例

1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...

JavaScript で H5 ゴールド コイン関数を実装する (サンプル コード)

今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...

Vueフィルターとカスタム命令の使用

目次フィルター01.とは02. やり方(1)フィルターを定義する(2)使用方法(3)フィルタパラメー...

MySQL の 10 進数データ型の小数点埋め込み問題の詳細な説明

序文開発プロセスでは、10 進データ型がよく使用されます。 MySQL では、小数点は正確なデータ型...

JS でページのスクリーンショット機能を実装する方法

「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...

linuxdeployqt を使用して Ubuntu で Qt プログラムをパッケージ化する問題を解決する

いくつかの Qt インターフェース プログラムを作成しましたが、Qt 環境がインストールされていない...

VS2019 が mysql8.0 データベースに接続する方法 (画像とテキスト付き)

1. まず、VS2019とMySQLデータベースを準備します。どちらも公式サイトからダウンロードで...

Vueはドラッグアンドドロップまたはクリックで写真をアップロードする機能を実装しています

この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...