序文ムービー プロジェクトでは、ページを切り替えてから現在のムービー リスト ページに戻るとムービー データの最初の部分に戻ってしまうことを防ぐために、ムービー リスト内のドロップダウンの現在の位置を保存したいと考えています。 このとき、少しスライドするたびに現在の位置を保存するのではなく、一定時間ごとに 1 回保存するようにします。このとき、手ぶれ補正とスロットリングを使用できます。 コンセプト簡単に言えば、手ぶれ補正はタイマーを使用して目的を達成することです。 デバウンス: コールバックはイベントがトリガーされてから n 秒後に実行されます。n 秒以内に再度トリガーされた場合は、タイミングが再開されます。 典型的な例は入力ボックス検索です。入力が完了してから n 秒後に検索要求が行われ、n 秒以内にさらにコンテンツが入力されると時間がリセットされます。 スロットル: 機能は単位時間内に 1 回のみ起動できると規定されています。この単位時間内に機能が複数回起動された場合、そのうち 1 つだけが有効になります。 典型的なケースとしては、マウスを連続的にクリックしてトリガーし、n 秒以内に複数回クリックしても 1 回しか有効にならないように規定されています。 安定意味頻繁な操作はジッターを防ぎます。操作後 n 秒以内に操作が行われない場合、イベントがトリガーされます。操作が継続すると、タイミングがリセットされます。 使用シナリオ
コード// ユーティリティ.js // 即時: 関数の実行をすぐに開始するかどうか debounce(func, delay = 300, immediate = false) { タイマーを null にする 関数()を返す{ if (タイマー) { タイムアウトをクリア(タイマー) } if (即時 && !タイマー) { func.apply(これ、引数) } タイマー = setTimeout(() => { func.apply(これ、引数) }、 遅れ) } } Vueでの使用方法1: パブリックメソッドutilsに記述して導入する 'utils' から { debounce } をインポートします メソッド: { appSearch:debounce(function(e.target.value){ this.handleSearch(値) }, 1000), ハンドル検索(値) { console.log(値) } } 方法2: 現在のvueファイルに書き込む データ: () => { 戻る { デバウンス入力: () => {} } }, メソッド: { showApp(値) { console.log('値', 値) }, デバウンス(func, 遅延 = 300, 即時 = false) { タイマーを null にする 関数()を返す{ if (タイマー) { タイムアウトをクリア(タイマー) } if (即時 && !タイマー) { func.apply(これ、引数) } タイマー = setTimeout(() => { func.apply(これ、引数) }、 遅れ) } } }, マウント() { this.debounceInput = this.debounce(this.showApp, 1000) }, スロットリング意味頻繁な操作は関数の実行を薄めます。頻繁な操作が発生すると、関数は n 秒ごとに 1 回だけトリガーされます。 使用シナリオ
コード// ユーティリティ.js 関数スロットル(関数、遅延 = 300){ 前 = 0 とする 関数()を返す{ now = Date.now() とします。 if ((現在 - 前回) >= 遅延) { func.apply(これ、引数) prev = Date.now() } } } Vueでの使用使い方は手ぶれ補正と同じ 要約するVue での手ぶれ補正とスロットリングの使用に関するこの記事はこれで終わりです。Vue の手ぶれ補正とスロットリングの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: Win7 インストール MySQL 5.6 チュートリアル図
Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...
目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...
原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...
この記事では、積み上げ棒グラフを実装するためのVue+echartsの具体的なコードを参考までに紹介...
コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...
今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...
mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...
<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...
目次1. コンテンツの概要2. 文字セットと文字順序の概念と関係3. MySQL でサポートされてい...
イメージの構築は、DevOps プロセスにおいて非常に重要なプロセスです。一般的に、イメージの構築と...
MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...
この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...
目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...
目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...
序文JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディング スタ...