Vue2.x - アンチシェイクとスロットリングの使用例

Vue2.x - アンチシェイクとスロットリングの使用例

ユーティリティ:

// 手ぶれ防止エクスポート const debounce = (func, wait = 3000, immediate = true) => {
 タイムアウトを null にします。
 関数()を返す{
  コンテキストを this とします。
  args = 引数とします。
  if (timeout) clearTimeout(timeout);
  if (即時) {
   var callNow = !timeout; //最初のクリックは true、時間内の 2 回目のクリックは false、時間切れになると最初のクリックが繰り返されます timeout = setTimeout(() => {
    タイムアウト = null;
   }, wait); //タイマーID
   if (callNow) func.apply(context, args);
  } それ以外 {
   タイムアウト = setTimeout(関数() {
    func.apply(コンテキスト、引数);
   }、 待って);
  }
 };
};
// タイムスタンプスキームエクスポート const throttleTime = (fn, wait = 2000) => {
 var pre = Date.now();
 関数()を返す{
  var コンテキスト = this;
  var args = 引数;
  var now = Date.now();
  if (now - pre >= wait) {
   fn.apply(コンテキスト、引数);
   pre = Date.now();
  }
 };
};
// タイマーソリューション export const throttleSetTimeout = (fn, wait = 3000) => {
 var タイマー = null;
 関数()を返す{
  var コンテキスト = this;
  var args = 引数;
  if (!タイマー) {
   タイマー = setTimeout(関数() {
    fn.apply(コンテキスト、引数);
    タイマー = null;
   }、 待って);
  }
 };
};

vue での使用:

<テンプレート>
 <div class="main">
  <p>手ぶれ補正はすぐに実行されます</p>
  <button @click="click1">クリック</button>

  <br />

  <p>手ぶれ補正はすぐには行われません</p>
  <button @click="click2">クリック</button>

  <br />

  <p>スロットリング タイムスタンプ スキーム</p>
  <button @click="click3">クリック</button>

  <br />

  <p>スロットル タイマー ソリューション</p>
  <button @click="click4">クリック</button>
 </div>
</テンプレート>

<スクリプト>
'./utils' から { debounce、throttleTime、throttleSetTimeout } をインポートします。
エクスポートデフォルト{
 メソッド: {
  クリック1: デバウンス(
   関数() {
    console.log('手ぶれ補正はすぐに実行されます');
   },
   2000年、
   真実
  )、
  クリック2: デバウンス(
   関数() {
    console.log('手ぶれ補正はすぐには実行されません');
   },
   2000年、
   間違い
  )、
  クリック3: スロットルタイム(関数() {
   console.log('スロットルタイムスタンプスキーム');
  })、
  クリック4: スロットル設定タイムアウト(関数() {
   console.log('スロットルタイマースキーム');
  })
 },
};
</スクリプト>

<スタイル スコープ lang="scss">
* {
 マージン: 0;
 フォントサイズ: 20px;
 ユーザー選択: なし;
}
。主要 {
 位置: 絶対;
 左: 50%;
 変換: translateX(-50%);
 幅: 500ピクセル;
}
ボタン {
 下部マージン: 100px;
}
</スタイル>

説明する:

画像安定化:

即時実行バージョン: 即時が true の場合、コマンドは最初にクリックされたときに実行され、再度クリックされても実行されません。待機時間が終了すると、次のクリックが有効になり、最初の 1 回のみ実行されます。

原理:

最初にクリックすると、timeoutID が存在せず、callNow が true であるため、対象コードがすぐに実行されます。 2 回目にクリックすると、timeoutID が存在し、callNow が false であるため、対象コードは実行されません。 待機時間が終了すると、timeoutID が null に設定され、即時実行ロジックが繰り返されます。

即時実行しないバージョン:immediate が false の場合、最初のクリックは実行されません。待機時間が経過した後に有効になります。つまり、何回クリックしても、最後のクリック イベントのみが実行されます。

原理:

setTimeout を使用してイベントの実行を遅らせます。複数回トリガーされた場合は、最後に実行されたコードを clearTimeout してタイミングを再開します。タイミング中にイベントがトリガーされない場合は、対象コードを実行します。

スロットル:

イベントが連続してトリガーされた場合、待機頻度で対象コードを実行します。

効果:

上記は、Vue2.x-anti-shake と throttling の使用例の詳細です。vue anti-shake と throttling の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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

<<:  Linuxでテキスト比較を実現するコツを教えます

>>:  mysql バッチで大量のデータを削除する

推薦する

ウェブサイトのAboutページの紹介コンテンツの書き方

公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...

MySQLのインデックス設計の原則と一般的なインデックスの違いについて簡単に説明します。

インデックス定義: ディスク上に保存される個別のデータベース構造であり、データ テーブル内のすべての...

VMWare Linux MySQL 5.7.13 のインストールと設定のチュートリアル

この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...

MySQLはIDに適切なデータ型を選択します

目次分散IDソリューションの概要データベース自動増分IDデータベースマルチマスターモード数値セグメン...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

Linux でプロセスを効果的に管理するための 8 つのコマンド

序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

ウェブサイトのビジュアルデザインの重要なポイント

手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私...

docker pullがリセットされる問題を解決する

この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...

Elasticsearchツールcerebroのインストールと使用チュートリアル

Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...

MySQL でローカル ユーザーを作成し、データベース権限を付与する方法の例

序文MySQL をインストールすると、通常はスーパーユーザー root を作成します。多くの人がこの...

Typescript での infer キーワードの使用に関する詳細な理解

目次推測する事例:理解を深める参照する後で忘れないように、キーワード infer をメモしておきます...

太陽系の惑星のアニメーション効果を実現するHTML+CSS3コード

太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...

よくある HTML タグの記述エラー

HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...

JavaScript フレームワーク デザイン パターンの詳細な説明

目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...