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 をよろしくお願いいたします。

以下もご興味があるかもしれません: