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 バッチで大量のデータを削除する

推薦する

CSSメディアクエリのアスペクト比を小さくする方法

CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直...

XHTML 入門チュートリアル: リストタグの使用

リストは、類似または関連する一連の項目をリストするために使用されます。順序なしリスト(箇条書きリスト...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

CSSコンテンツ属性の具体的な使用法

コンテンツ属性は通常、::before および ::after 疑似要素で使用され、疑似要素のコンテ...

JS ベースの Ajax 同時リクエスト制御を実装する方法

目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...

HTMLファイルとは何ですか?HTMLファイルを開く方法

HTML は Hypertext Markup Language の略です。現在、ほとんどの Web...

Nginxはhttpとhttpsの両方のアクセスをサポートするために同じドメイン名を設定します

Nginx は同じドメイン名で構成されており、http と https の両方でアクセスできます。証...

Linux での MySQL 5.7.19 のインストールに関する問題の概要

初めて仮想マシンに MySQL をインストールしたとき、多くの問題が発生しました。ここでそれらを書き...

Linux学習におけるmkdirコマンドの詳しい説明

目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...

MySQLのパフォーマンスが突然低下する理由

場合によっては、SQL ステートメントが通常どおり、非常に速く実行される状況に遭遇することがあります...

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...

MySQL における一般的なランキングの問題をいくつかまとめます

序文:一部のアプリケーション シナリオでは、成績や年齢によるランキングなど、ランキングの問題が発生す...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

Tomcat でのコネクタ構成

JBoss は Tomcat を Web コンテナとして使用するため、JBoss の Web コンテ...