ユーティリティ:// 手ぶれ防止エクスポート 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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
公式、電子商取引、ソーシャル ネットワーキング、個人のいずれの Web サイトでも、訪問者に貴重な時...
インデックス定義: ディスク上に保存される個別のデータベース構造であり、データ テーブル内のすべての...
この記事では、参考までにVMWare LinuxにMySQL 5.7.13をインストールするチュート...
目次分散IDソリューションの概要データベース自動増分IDデータベースマルチマスターモード数値セグメン...
目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私...
この記事では、docker pull がリセットされる問題を解決する方法を紹介し、皆さんと共有します...
Cerebro は、Elasticsearch バージョン 5.x より前の Elasticsear...
序文MySQL をインストールすると、通常はスーパーユーザー root を作成します。多くの人がこの...
目次推測する事例:理解を深める参照する後で忘れないように、キーワード infer をメモしておきます...
太陽系の 8 つの惑星(衛星を除く)のアニメーションを作成します。すべての惑星は太陽の周りを回ってい...
HTML Police がコードを調べて意味のないタグをすべて見つけ出すので、注意を払う必要がありま...
目次動画最優秀選手ムヴヴムVueのソーススパ mpa要素を作成するクラス要約する動画 Model(模...