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 ウィンドウをポップアップする問題の解決策

推薦する

JavaScriptスコープについての簡単な説明

目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...

Vue Router の 10 の高度なヒントのまとめ

序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...

div の特定の実装は自動的に折り返されず、HTML で折り返されないよう強制されます。

1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...

MySQL で不明なフィールド名を回避する方法

序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...

MySQL コマンドを使用してインデックスを作成、削除、およびクエリする方法の紹介

MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

React-vscode で jsx 構文を使用する際の問題と解決策

問題の説明プラグインをインストールした後、ES7 React/Redux/GraphQL/React...

nginx で http でアクセスする Web サイトを https に変更する方法

目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....

MySQLのMERGEストレージエンジンの詳細な説明

MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...

MySQL グリーン解凍バージョンのインストールと設定手順

手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....

CSS3 すりガラス効果

すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...

ウェブページの背景色を制御する CSS コード

誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...

VUEのデータプロキシとイベントの詳細な説明

目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...

Vue+Elementでページング効果を実現

この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...

Vueにおける仮想DOMの理解のまとめ

これは本質的に、ビュー インターフェース構造を記述するために使用される共通の js オブジェクトです...