JS 関数のアンチシェイクと関数スロットリングを理解する方法

概要

関数アンチシェイクと関数スロットルはどちらも、関数をパラメータとして受け取り、アンチシェイクまたはスロットルが追加された関数を返す関数を定義します。

したがって、機能のアンチシェイクと機能のスロットルは、入力された機能を処理および変更し、特定の機能を備えた新しい機能を生成する役割を担う機能ファクトリーと見なすことができます。

機能手ぶれ補正は一定時間内に1回だけ実行され、機能スロットリングは間隔を置いて実行されます。

次のようなシナリオがあるとします。あるページに、「さらに読み込む」というボタンがあります。このボタンの機能は、Ajax を使用してバックエンド サーバーにさらにデータを要求し、ページに表示することです。Ajax 要求への応答は非同期であり、一定の応答時間があることは誰もが知っています。ユーザーがボタンをクリックした直後にもう一度クリックすると、従来のコールバック関数の動作に従って、コールバック関数がすぐに再度実行されます。この場合、ユーザーが短時間に「さらに読み込む」ボタンを 2 回クリックすると、コールバック関数が実行され、バックエンドへの 2 つの同一の Ajax 要求が開始されます。サーバーは要求を 1 つずつ受信し、返されたデータを処理します。短時間に 2 つの要求は問題ありませんが、ユーザーが「さらに読み込む」ボタンを n 回続けてクリックした場合はどうなるでしょうか。すると、短時間に n 個の同一リクエストがサーバーに送信されます。バックエンドが Ajax リクエストを処理してデータを返すたびに、コンテンツが変更されていなくてもページが再レンダリングされます。これによりパフォーマンスの問題が発生し、サーバーに負荷がかかるだけでなく、ブラウザーに不要なレンダリングが発生します。これは、関数の頻繁な実行による副作用です。

では、この関数を頻繁に実行することによって発生する副作用を軽減するには、このボタンのクリック イベント コールバック関数をどのように設定すればよいでしょうか?

1. 関数デバウンス

機能アンチシェイクの設計思想は、機能が実行される前に待機時間を追加することです。この待機時間中に機能を再度実行する必要がある場合、待機時間が再計算され、機能が再度待機されます。このプロセスは、待機時間が経過して機能を再度実行する必要がなくなるまで繰り返されます。

上記のシナリオを例に挙げます。バックエンドに ajax リクエストを送信する応答時間が約 2 秒であると仮定すると、待機時間を 2 秒に設定します。ユーザーが初めて [さらに読み込む] ボタンをクリックすると、コールバック関数はすぐには実行されません。つまり、ajax はまだ送信されていません。この時点で、関数は待機中です。ユーザーが 2 秒以内に [さらに読み込む] を再度クリックすると、待機時間が再計算され、さらに 2 秒待機します。この時点で、2 秒が経過し、ユーザーが 3 回目の [さらに読み込む] ボタンをクリックしていない場合、関数の実行が開始され、バックエンドに ajax リクエストが送信されます。

手ぶれ補正機能は以下のように実装されます。

関数デバウンス(fn, delay){
    timeId = null とする
    関数()を返す{
        コンテキスト = this
        if(timeId){window.clearTimeout(timeId)}
        タイムID = setTimeout(()=>{
            fn.apply(コンテキスト、引数)
            タイムID = null
        }、遅れ）
    }
}

2. 関数のスロットリング

関数スロットリングの設計思想は、関数が実行された後に冷却時間を追加することです。関数は、初めて実行されるときはすぐに実行されますが、実行後に冷却時間が設定されます。冷却時間中は、冷却時間が終了して関数の実行が許可されるまで、関数を再度実行することはできません。

上記のシナリオを例に挙げます。冷却時間も 2 秒に設定されていると仮定します。ユーザーが初めて [さらに読み込む] をクリックすると、ボタンのコールバック関数が実行され、つまり、Ajax リクエストがバックグラウンドに送信されます。このとき、ユーザーはすぐに [さらに読み込む] ボタンをもう一度クリックします。この時点では 2 秒の冷却時間が経過していないため、2 回目の関数実行に遅延実行が追加されます。

関数スロットル(fn, 遅延){
    canUse = true とします
    関数()を返す{
        if(canUse){
            fn.apply(これ、引数)
            canUse = 偽
            setTimeout(()=>canUse=true、遅延)
        }
    }
}

上記は、JS 機能の手ぶれ防止と機能スロットリングを理解する方法の詳細です。JS 機能の手ぶれ防止と機能スロットリングの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。