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

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

（２）ページがデータを無限に読み込む

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

上記 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 をよろしくお願いいたします。

以下もご興味があるかもしれません: