序文1. デバウンス: 高頻度イベントがトリガーされた後、関数は n 秒以内に 1 回だけ実行されます。高頻度イベントが n 秒以内に再度トリガーされた場合、時間が再計算されます。 たとえば、Baidu で検索するときと同じように、入力するたびに関連語がポップアップ表示されます。関連語を制御するこの方法は、入力ボックスの内容が変更されてもすぐにはトリガーされません。入力を終了してからしばらく経ってからトリガーする必要があります。 スロットリング: 高頻度イベントがトリガーされますが、n 秒以内に 1 回しか実行されないため、スロットリングによって関数の実行頻度が低下します。 たとえば、関数は実行サイクル以上の場合にのみ実行されるようにスケジュールされ、サイクル中に呼び出された場合は実行されません。これは、Taobao で限定版の売れ筋商品を購入しようとしているときに、購入するために更新ボタンを何度もクリックしているのに、クリックが機能しなくなるときが来るようなものです。ここでスロットリングが登場します。クリックが速すぎるとシステムにバグが発生するのを恐れるからです。 2. 違い: アンチシェイクは複数の実行を最後の実行にすることであり、スロットリングは複数の実行を間隔をあけて実行にすることです。 手ぶれ補正やスロットリング機能は、常にインタビューの話題になります。皆さんは関数 anti-shake や throttling の書き方についてはよくご存知かもしれませんが、Vue で関数 anti-shake や throttling を使用する際にはちょっとしたエピソードがあります。 Vue での正しい使用姿勢 なぜ?これは 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) } } }
関数のスロットリング
最初の非即時実行 関数スロットル(f,t)をエクスポートする{ タイマーを true にします。 戻り値 (...引数) =>{ if(!タイマー){ 戻る; } タイマー=false; タイムアウトを設定します(()=>{ f(...引数); タイマー=true; },t) } }
最初の即時実行バージョン エクスポート関数 throttleFirstExt(f, t) { フラグを true にします。 戻り値 (...引数) => { if (フラグ) { f(...引数); フラグ = false; タイムアウトを設定する(() => { フラグ = true }, t) } } }
統合版 関数スロットルをエクスポートします(f, t, im = false){ フラグを true にします。 戻り値 (...引数) =>{ if(フラグ){ フラグ = 偽 im && f(...引数) タイムアウトを設定する(() => { !im && f(...引数) フラグ = true },t) } } } 適用シナリオ:
要約するVue 機能の手ぶれ補正とスロットリングの正しい使い方に関するこの記事はこれで終わりです。Vue 機能の手ぶれ補正とスロットリングに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Docker ベースの ELK を素早く構築する方法
>>: MySql が常に mySqlInstallerConsole ウィンドウをポップアップする問題の解決策
目次1. 範囲1. グローバルな範囲2. ローカルスコープ2. 変数のスコープ1. グローバル変数2...
序文Vue Router は、Vue.js の公式ルーティング マネージャーです。 Vue.js の...
1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...
序文この記事では、DDCTF の 5 番目の質問、つまり不明なフィールド名をバイパスする手法を紹介し...
MySQL データベース テーブルでは、インデックスを作成、表示、再構築、削除できるため、クエリ速度...
現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...
問題の説明プラグインをインストールした後、ES7 React/Redux/GraphQL/React...
目次1. 背景2. 前提条件https:証明書システム: 3. 操作プロセス3.1 証明書の生成3....
MERGE ストレージ エンジンは、MyISAM テーブルのグループを論理ユニットとして扱い、同時に...
手順: 1. MySQLデータベースをインストールする1. MySQL-5.6.17-winx64....
すりガラス効果がうまく表現されていれば、ページが非常に鮮やかで立体的に見えるようになります。写真に直...
誰もが自分の Web ページの背景にふさわしい画像を見つけることに悩むことが多いと思います。これは事...
目次Object.defineProperty メソッドのレビューデータブローカーとは何ですか? V...
この記事の例では、ページング効果を実現するためのvue+Elementの具体的なコードを参考までに共...
これは本質的に、ビュー インターフェース構造を記述するために使用される共通の js オブジェクトです...