Vue で debouce の手ぶれ補正機能を使用する方法

Vue で debouce の手ぶれ補正機能を使用する方法

1. 手ぶれ補正機能

2 つの Ajax 通信間の間隔は 2500 ミリ秒未満であってはならないと仮定すると、上記のコードは次のように書き直すことができます。

$('textarea').on('keydown', debounce(ajaxAction, 2500));

関数デバウンス(fn, delay){
  var timer = null; // タイマーを宣言する return function() {
    var コンテキスト = this;
    var args = 引数;
    タイマーをクリアします。
    タイマー = setTimeout(関数() {
      fn.apply(コンテキスト、引数);
    }、 遅れ);
  };
}

上記のコードでは、ユーザーが 2500 ミリ秒以内にキーを再度押すと、以前のタイマーがキャンセルされ、新しいタイマーが作成されます。これにより、コールバック関数の呼び出し間隔が少なくとも 2500 ミリ秒になることが保証されます。

2. Vueでdebouceの手ぶれ補正機能を使用する

最後に呼び出されてから wait ミリ秒の遅延後に func を呼び出すdebounced関数を作成します。 debounced 関数は、遅延された関数呼び出しをキャンセルする cancel メソッドと、それをすぐに呼び出すflushメソッドを提供します。 funcメソッドを呼び出す方法を決定するためのoptionsオブジェクト、遅延の前後にトリガーする方法を決定するためのoptions.leadingと|またはoptions.trailingを提供することができます。

(注意: 先に電話してから待つか、先に待ってから電話するか)。

funcが呼び出されると、 debounced関数に最後に提供された引数が渡されます。 debounced関数への後続の呼び出しは、func への最後の呼び出しの結果を返します。

Lodash debouce パラメータ:

  • func (Function) : デバウンスする関数。
  • [wait=0] (number) : 遅延するミリ秒数。
  • [options=] (Object) : オプション オブジェクト。
  • [options.leading=false] (boolean) : 遅延が始まる前に呼び出されることを指定します。
  • [options.maxWait] (number) : func が遅延できる最大値を設定します。
  • [options.trailing=true] (boolean) : 遅延が終了した後に呼び出されることを指定します。
<テンプレート>
<el-入力
    v-model="値"
    サイズ="ミニ"
    placeholder="入力してください。"
    クリア可能
    @keydown.enter="ハンドル検索"
  </el-input> ...
</テンプレート>
<スクリプト>
'lodash' から _ をインポート
エクスポートデフォルト{
データ() {
    戻り値: '' }
},
作成する() {
    this.handleSearch = _.debounce(() => {
      // リストを取得します this.getList();
    }, 300);
},
破棄する前に() {
    //この関数のアンチシェイク呼び出しをキャンセルします this.handleSearch.cancel();
},
}
</スクリプト>

Vue での debouce 手ぶれ補正機能の使い方についてはこれで終了です。Vue での debouce 手ぶれ補正機能の使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue で手ぶれ補正機能コンポーネント操作を使用する
  • Vue で携帯電話番号認証のサンプルコードを実装する (手ぶれ補正機能の適用シナリオ)

<<:  純粋な CSS3 で実装された三目並べゲーム

>>:  MySQLのジョイントクエリについて詳しく説明します

推薦する

MYSQL での Truncate の使用法の詳細な説明

この記事のガイド: テーブル内のデータを削除するには、削除と切り捨ての 2 つの方法があります。TR...

シェル スクリプトを使用してワンクリックで MySQL 5.7.29 をインストールする方法

この記事は51CTOブログの著者wjw555の作品を参照しています。スクリプトの内容: vim イン...

Debian 9 システムに MySQL データベースをインストールする方法

序文タイトルを見ると、誰もが「Debian 9 に MySQL をインストールするにはどうすればいい...

マウスの尾行効果を実現する JavaScript

マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成された...

MySQL 8の新機能ウィンドウ関数の役割

MySQL 8.0 の新機能は次のとおりです。 Unicode 9.0 をすぐに完全にサポートウィン...

Vue で ToDo アプリケーションを実装する例

背景まず最初に、私はフロントエンド開発の専門家ではないことを述べておきたいと思います。私の以前のコン...

XHTMLコードの一般的なアプリケーション問題をまとめる

<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...

bash を使って日付をカウントダウンする方法

重要なイベントまであと何日あるか知りたいですか? Linux bash と date コマンドが役に...

CSS3 クリアフロートメソッドの例

1. 目的この記事を通じて、誰もがフロートをクリアする原理と方法を理解し、最終的にこの記事が最良であ...

Docker ケース分析: Redis サービスの構築

目次1 マウントディレクトリとファイルを作成する2 Redisイメージを取得する3 コンテナを作成し...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

Linux プラットフォームの MySQL でリモート ログインを有効にする

開発中、MySQL へのリモートアクセスでよく問題に遭遇します。そのたびに検索する必要があり、面倒に...

JS ES の新機能、変数分離割り当て

目次1. 配列の分離割り当て1.1 配列分離割り当てとは何ですか? 1.2 配列分離割り当てに失敗し...

TypeScript 開発のための 6 つの実用的なヒント

目次1. 開発前にエンティティの種類を決定する2. インターフェースをリクエストするときは、使用する...

CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...