Vue 関数のアンチシェイクとスロットリングの正しい使用方法

Vue 関数のアンチシェイクとスロットリングの正しい使用方法

序文

1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されます。高頻度イベントが n 秒以内に再度トリガーされた場合、時間が再計算されます。

たとえば、Baidu で検索するときと同じように、入力するたびに関連語がポップアップ表示されます。関連語を制御するこの方法は、入力ボックスの内容が変更されてもすぐにはトリガーされません。入力を終了してからしばらく経ってからトリガーする必要があります。

スロットリング: 高頻度イベントがトリガーされますが、n 秒以内に 1 回しか実行されないため、スロットリングによって関数の実行頻度が低下します。

たとえば、関数は実行サイクル以上の場合にのみ実行されるようにスケジュールされ、サイクル中に呼び出された場合は実行されません。これは、Taobao で限定版の売れ筋商品を購入しようとしているときに、購入するために更新ボタンを何度もクリックしているのに、クリックが機能しなくなるときが来るようなものです。ここでスロットリングが登場します。クリックが速すぎるとシステムにバグが発生するのを恐れるからです。

2. 違い: アンチシェイクは複数の実行を最後の実行にすることであり、スロットリングは複数の実行を間隔をあけて実行にすることです。

手ぶれ補正やスロットリング機能は、常にインタビューの話題になります。皆さんは関数 anti-shake や throttling の書き方についてはよくご存知かもしれませんが、Vue で関数 anti-shake や throttling を使用する際にはちょっとしたエピソードがあります。

Vue での正しい使用姿勢

多くの人は関数を直接定義し、関数内で debounce を使用すると思います。これは間違った使い方です。

なぜ?これは Vue のイベントバインディング原則に関連していますが、ここでは詳しく紹介しません。関数本体内で直接使用すると、最終結果として、即時実行される匿名関数が実行されることになり、これは誤りです。詳細な参照

原理

関数のデシェイキング

手ぶれ防止機能とは、機能が実行されるまでの時間を指します。これは、生活のシナリオ(エレベーターに乗る)として理解できます。エレベーターのドアを開くボタンをクリックすると、エレベーターはドアを開き、しばらく待ってからドアを閉めます。ただし、待機期間中に誰かがドア開ボタンを再度クリックすると、エレベーターはドア閉時間まで待機し続けます。ドア閉時間が終了し、誰もドア開ボタンをクリックしなくなるまで、エレベーターは作動しません。

コード記述

最初の非即時実行

エクスポート関数debounce(f, t){
    タイマーを設定します。
    戻り値 (...引数) => {
        タイマーをクリアします。
        タイマー = setTimeout(() => {
            f( ...引数)
        }, t)
    }
}

最初の即時実行

いくつかのシナリオでは、最初に待つ必要がなく、すぐに実行する必要があります。たとえば、コンソールを開いてウィンドウのビュー サイズを取得します (ここでは、ウィンドウ サイズを変更し続け、停止するまで待機してから、ウィンドウのビュー サイズを再度取得する必要があります)。

エクスポート関数 debounceFirstExe(f, t){
    タイマーを設定し、フラグを true にします。
    戻り値 (...引数) => {
        if (フラグ){
            f(...引数);
            フラグ = false;
        }それ以外 {
            タイマーをクリアします。
            タイマー = setTimeout(() => {
                f(...引数);
                フラグ = true;
            }, t)
        }
    }
}

統合版

エクスポート関数 debounce(f, t, im = false){
    タイマーを設定し、フラグを true にします。
    戻り値 (...引数) => {
        // すぐに実行する必要がある場合 if (im){
           if (フラグ){
               f(...引数);
               フラグ = false;
           }それ以外 {
               タイマーをクリアします。
               タイマー = setTimeout(() => {
                   f(...引数);
                   フラグ = true
               }, t)
           }
       }それ以外 {
           // 即時実行ではない clearTimeout(timer);
           タイマー = setTimeout(() => {
               f(...引数)
           }, t)
       }
    }
}

コード レベルで関数 anti-shake をどこで使用できますか?

いいね、入力ボックスの確認、いいねのキャンセル、注文の作成などのネットワーク水素を送信する場合、ボタンを連続してクリックすると、複数のリクエストが送信されることがあります。これはバックエンドでは許可されません。マウスのサイズが変更/スクロールされるたびに、統計イベントがトリガーされます。

関数のスロットリング

機能スロットリングの原理は、機能手ぶれ補正の原理と似ています。機能スロットリングとは、一定期間内に 1 回だけ実行されることを意味します。

最初の非即時実行

関数スロットル(f,t)をエクスポートする{
    タイマーを true にします。
    戻り値 (...引数) =>{
        if(!タイマー){
            戻る;
        }
        タイマー=false;
        タイムアウトを設定します(()=>{
            f(...引数);
            タイマー=true;
        },t)

    }
}

エフェクトでは何度もクリックしましたが、実行時間を 1000 ミリ秒に指定したため、実行されたのは 4 回だけでした。これにより、実行回数も削減されます。

最初の即時実行バージョン

エクスポート関数 throttleFirstExt(f, t) {
    フラグを true にします。
    戻り値 (...引数) => {
        if (フラグ) {
            f(...引数);
            フラグ = false;
            タイムアウトを設定する(() => {
                フラグ = true
            }, t)
        }
    }
}

ここでは、最初のクリックがすぐに実行されることがわかります。

統合版

関数スロットルをエクスポートします(f, t, im = false){
    フラグを true にします。
    戻り値 (...引数) =>{
        if(フラグ){
            フラグ = 偽
            im && f(...引数)
            タイムアウトを設定する(() => {
                !im && f(...引数)
                フラグ = true
            },t)
        }
    }
}

適用シナリオ:

  • DOM要素のドラッグ機能の実装(mousemove)
  • 関連付けを検索(キーアップ)
  • マウスの移動距離を計算する (mousemove)
  • キャンバスは描画ボード機能(マウス移動)をシミュレートします
  • シューティング ゲームでのマウスダウン/キーダウン イベント (単位時間あたりに発射できる弾丸は 1 発のみ)
  • スクロール イベントをリッスンして、ページが最下部に到達したかどうかを判断し、自動的にさらに読み込みます。スクロールにデバウンスを追加すると、ユーザーがスクロールを停止した後にのみ、ページの最下部に到達したかどうかが判断されます。スロットルの場合は、ページがスクロールされている限り、一定期間ごとに 1 回判断されます。

要約する

Vue 機能の手ぶれ補正とスロットリングの正しい使い方に関するこの記事はこれで終わりです。Vue 機能の手ぶれ補正とスロットリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue における機能アンチシェイクスロットリングの理解と応用
  • Vue で手ぶれ補正とスロットリングを使用する方法
  • Vueでアンチシェイクとスロットリングを使用すると、これが指摘する問題

<<:  Docker ベースの ELK を素早く構築する方法

>>:  MySql が常に mySqlInstallerConsole ウィンドウをポップアップする問題の解決策

推薦する

SQLは、隣接する2行のデータに対して加算、減算、乗算、除算の演算を実行します。

SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...

MySQL監視グループレプリケーションについて簡単に説明します

元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...

VS2022 リモート デバッグ ツールの使い方

WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...

ESXI の仮想マシンにワークステーションをインストールするときに発生するネットワーク障害の解決策

問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...

Alibaba Cloud Server に MySQL データベースをインストールする詳細なチュートリアル

目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...

MySQLにおけるテーブルインデックスの定義方法と導入

概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...

HTMLの空リンクの役割についての簡単な説明

空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...

Vue マルチページ構成の詳細

目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....

Zabbixを使用してOracleテーブルスペースの操作プロセスを監視する

0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...

HTML入力ボックスの最適化により、ユーザーエクスペリエンスと使いやすさが向上します。

ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...

Dockerコンテナのログ分析

コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

ReactでuseStateを使用する詳細な例

使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...

Mysql マスタースレーブレプリケーションの注意事項の説明

1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...