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

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScript の手ぶれ補正機能の分析
  • Web プロジェクト開発 JS 機能の手ぶれ補正とスロットリングのサンプル コード
  • JS 手ぶれ補正機能の実装と使用シナリオ
  • JavaScript スロットリングと手ぶれ補正機能についての簡単な説明
  • JavaScript 関数のアンチシェイクとスロットリングの簡単な分析
  • JavaScript における手ぶれ補正とスロットリング機能の詳細な説明

<<:  Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明

>>:  MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説

推薦する

Firebug ツールを使用して iPad でページをデバッグする

iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...

丸い角や鋭い角の代わりに文字を使用することに関する研究経験の共有

1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...

K3s 入門ガイド - Docker で K3s を実行するための詳細なチュートリアル

k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...

不規則な絵の滝の流れ原理の分析と応用

プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...

Docker クロスホストネットワーク (オーバーレイ) の実装

1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...

Linux システムで時間を取得して使用する方法

Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...

光沢のある輝くウェブサイトデザインの感動的なデザイン例

このコレクションには、あなたのデザインアイデアにインスピレーションを与える、輝いて光沢のある、優れた...

Linux で lvm 論理ボリューム パーティションのサイズを調整するチュートリアル (xfs や ext4 などのさまざまなファイル システム用)

序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...

Vue2.0/3.0双方向データバインディングの実装原理の詳細説明

Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...

MySQL 最適化: キャッシュ最適化 (続き)

MySQL 内部には至るところにキャッシュがあります。MySQL のソースコードを読むと、キャッシ...

MySQLはテーブルデータを復元するためにfrmファイルとibdファイルを使用します

目次frm ファイルと ibd ファイルの紹介frm ファイル回復テーブル構造ibd ファイル回復テ...

MySql のクラッシュとサービスの起動失敗の解決策

私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...

MySQLのユーザー管理とPostgreSQLのユーザー管理の違い

1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...

Windows サーバー管理におけるセキュリティの考慮事項

ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...

Vue での weixin-js-sdk の一般的な使用方法の詳細な説明

リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...