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データベースのリアルタイムバックアップの知識ポイントを詳しく解説

推薦する

MySQLにおける(JOIN/ORDER BY)文のクエリ処理と最適化方法

EXPLAIN ステートメントは、MySQL クエリ ステートメント プロセスと EXPLAIN ス...

JavaScript 配列のマージのケーススタディ

方法1: var a = [1,2,3]; var b = [4,5] b を連結します。 コンソー...

Vueでシングルサインオンを実装する方法のまとめ

最近プロジェクトが中断され、RageFrame の研究は一時的に終了しました。この記事では、シングル...

初心者のためのWebサイト構築入門 ③ エイリアス(CNAME)レコードとURL転送

①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

Nginx は rtmp ライブ サーバーの実装コードを構築します

1. nginxソースディレクトリに新しいrtmpディレクトリを作成し、git clone http...

Linuxはiptablesを使用して複数のIPからのサーバーへのアクセスを制限します

序文Linux カーネルでは、netfilter は、パケット フィルタリング、ネットワーク アドレ...

Google Recaptcha 認証を使用した Vue 実装例

最近のプロジェクトでは、Google ロボット認証を使用する必要があります。これには VPN が必要...

ミニプログラムはミニプログラムクラウドを使用してWeChatの支払い機能を実装します

目次1. WeChat Payを開く1.1 アフィリエイト加盟店番号1.2 加盟店番号を追加する1....

Nginx のパフォーマンスを向上させるための提案

Web アプリケーションが 1 台のマシンでのみ実行される場合、パフォーマンスを向上させるのは非常に...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

モバイルブラウザが位置をサポートしない場合の解決策: 修正

具体的な方法は以下の通りです。 CSSコードコードをコピーコードは次のとおりです。 .wap_bot...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...

2 つの MySQL ユーザー削除ステートメント (delete user と drop user) の違い

ヒント: MySQL では、ユーザーの作成と削除が頻繁に必要になります。ユーザーを作成するときは、通...