Vue で手ぶれ補正とスロットリングを使用する方法

Vue で手ぶれ補正とスロットリングを使用する方法

序文

ムービー プロジェクトでは、ページを切り替えてから現在のムービー リスト ページに戻るとムービー データの最初の部分に戻ってしまうことを防ぐために、ムービー リスト内のドロップダウンの現在の位置を保存したいと考えています。

このとき、少しスライドするたびに現在の位置を保存するのではなく、一定時間ごとに 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 回だけトリガーされます。

使用シナリオ

  1. マウスクリック、マウスダウン、マウス移動は単位時間あたり1回だけ実行されます。
  2. スクロールイベント、遅延読み込み、スクロール読み込み、さらに読み込み、またはスクロールバーの位置の監視
  3. 頻繁なクリック送信やフォームの繰り返し送信を防ぐ

コード

// ユーティリティ.js
関数スロットル(関数、遅延 = 300){    
    前 = 0 とする
    関数()を返す{
        now = Date.now() とします。
        if ((現在 - 前回) >= 遅延) {
            func.apply(これ、引数)
            prev = Date.now()
        }
    }
}

Vueでの使用

使い方は手ぶれ補正と同じ

要約する

Vue での手ぶれ補正とスロットリングの使用に関するこの記事はこれで終わりです。Vue の手ぶれ補正とスロットリングの使用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue コンポーネントでのアンチシェイクとスロットリングの使用例の分析
  • Vue 関数のアンチシェイクとスロットリングの正しい使用方法
  • Vue2.x - アンチシェイクとスロットリングの使用例
  • VUEの手ぶれ補正とスロットリングの簡単な分析
  • Vue で lodash を使用してイベントのシェイクとスロットルを解除する
  • Vue で手ぶれ補正とスロットリングを使用する方法

<<:  Linuxの相対パスと絶対パスの使用

>>:  Win7 インストール MySQL 5.6 チュートリアル図

推薦する

Vite と Vue CLI の長所と短所

Vue エコシステムには Vite と呼ばれる新しいビルド ツールがあり、Vue CLI よりも 1...

Vue3 を使用してアップロード コンポーネントを実装するためのサンプル コード

目次一般的なアップロードコンポーネントの開発以下の機能を実装する必要がありますカスタムテンプレートサ...

マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...

Vue+echarts で積み上げ棒グラフを実現

この記事では、積み上げ棒グラフを実装するためのVue+echartsの具体的なコードを参考までに紹介...

iframe を更新する 3 つの方法

コードをコピーコードは次のとおりです。 <iframe src="1.htm&quo...

ウェブ開発者はIE7とIE8の共存を懸念している

今日、IE8 をインストールしました。ダウンロードするために Microsoft の Web サイト...

時間のかかるMySQLレコードのSQL例の詳細な説明

mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...

ウェブページのテーブルの境界線を設定する方法

<br />前回は、Web テーブルにセルの線を設定する方法を学びました。今日は、Web...

MySQLの文字セット設定を5分で理解しましょう

目次1. コンテンツの概要2. 文字セットと文字順序の概念と関係3. MySQL でサポートされてい...

Dockerイメージ構築原理の分析(Dockerをインストールしなくてもイメージを構築できる)

イメージの構築は、DevOps プロセスにおいて非常に重要なプロセスです。一般的に、イメージの構築と...

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...

Windows での MySQL 5.7.18 のインストールと設定のチュートリアル

この記事では、WindowsでのMySQL 5.7.18のインストールと設定のチュートリアルを参考ま...

JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明

目次JavaScript のプライベート クラス フィールドとプライバシーの必要性JavaScrip...

Angularコンポーネントライフサイクルの詳細説明(I)

目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...

JavaScript におけるセミコロンの詳細

序文JavaScript ではセミコロンはオプションであり、使用するかどうかは主にコーディング スタ...