概要関数アンチシェイクと関数スロットルはどちらも、関数をパラメータとして受け取り、アンチシェイクまたはスロットルが追加された関数を返す関数を定義します。 したがって、機能のアンチシェイクと機能のスロットルは、入力された機能を処理および変更し、特定の機能を備えた新しい機能を生成する役割を担う機能ファクトリーと見なすことができます。 機能手ぶれ補正は一定時間内に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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Linux curl フォームのログインまたは送信と Cookie の使用に関する詳細な説明
>>: MySQLデータベースのリアルタイムバックアップの知識ポイントを詳しく解説
iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...
1. フォントと文字表示の関係左側と右側の鋭角部分は Songti フォントで表示されます: &l...
k3dとは何ですか? k3d は、Docker で K3s クラスターを実行するための小さなプログ...
プロジェクトで発生した不規則な絵画壁のレイアウト問題は、次のように分析されます。 1.img dis...
1. Dockerのホスト間通信Docker クロスホスト ネットワーク ソリューションには以下が含...
Linux システム時間には 2 種類あります。 (1)暦上の時刻。値は、指定された時刻、1970 ...
このコレクションには、あなたのデザインアイデアにインスピレーションを与える、輝いて光沢のある、優れた...
序文システムをインストールしたときに、パーティション領域を適切に割り当てませんでした。その後のメンテ...
Vue2.0/3.0双方向データバインディングの実装原理双方向データバインディングとは、データの変更...
MySQL 内部には至るところにキャッシュがあります。MySQL のソースコードを読むと、キャッシ...
目次frm ファイルと ibd ファイルの紹介frm ファイル回復テーブル構造ibd ファイル回復テ...
私は長い間PHPに触れてきましたが、インストール環境は非常に不慣れです。多くの問題に遭遇しました。B...
1. MySQL ユーザー管理[例1.1] ローカルMySQLサーバーのテストデータベースにroot...
ウェブサーバー1. Webサーバーは、wev、cgi、asp機能を無効にするなど、不要なIISコンポ...
リンク: https://qydev.weixin.qq.com/wiki/index.php?ti...