序文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 ウィンドウをポップアップする問題の解決策
<meta http-equiv="X-UA-compatible" co...
SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...
元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...
WeChat 関連サービスをデバッグする場合など、職場のサーバー環境でリモートデバッグを行う必要があ...
問題の説明ESXI で Windows にワークステーションをインストールした後、内部の仮想マシンは...
目次序文1. MySQLをアンインストールする2. MySQLをインストールする要約する序文学習中に...
概要インデックスは、テーブル内の 1 つ以上の列に基づいて DBMS によって特定の順序で作成される...
空のリンク:つまり、ターゲット エンドポイントとのリンクはありません。フォーマット <a hr...
目次1. 複数ページの違い2. SPAとMPA 3. Vue Cli スキャフォールディング構成1....
0. 概要Zabbix は非常に強力なオープンソースの監視ツールです。以下では、Zabbix がテー...
ユーザーエクスペリエンスと使いやすさを向上させるために、入力ボックスなど、Web ページでユーザーが...
コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...
この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...
使用状態useState は、関数コンポーネント内で呼び出すことで、コンポーネントに内部状態を追加し...
1. マスター'x@xxxx:x'への接続エラー- 再試行時間: 60 再試行回数:...