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のジョイントクエリについて詳しく説明します

推薦する

コンテンツ領域の周囲を回転する CSS 動的グラデーション ボーダーの効果 (サンプル コード)

レンダリング ネットで関連情報を調べたところ、現在のダイナミックグラデーションボーダーの実装方法のほ...

jconsole を使用してリモート Tomcat サービスを監視する方法

JConsoleとはJConsole は Java 5 で導入されました。 JConsole は、コ...

Mysql ファジークエリが大文字と小文字を区別するかどうかの詳細な調査

序文最近、私は小さな個人ブログ プロジェクトを書くのに忙しくしています。 「グローバル検索」機能を実...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

Linux システムで crontab を使用して MySQL データベースを定期的にバックアップする方法

システムの crontab を使用して定期的にバックアップ ファイルを実行し、バックアップ結果を日付...

HTML割引価格計算の実装原理とスクリプトコード

コードをコピーコードは次のとおりです。 <!DOCTYPE HTML PUBLIC "...

VUEは底部吸引ボタンを実装

この記事では、VUEの具体的なコードを共有して、下部吸引ボタンを実装する例を紹介します。具体的な内容...

QT が MYSQL データベースに接続するための詳細な手順

最初のステップは、対応するデータベースモジュール(sql)をプロジェクトファイル( .pro )に追...

HTML 5 プレビュー

<br />オリジナル: http://www.alistapart.com/artic...

面白いウェブサイトをデザインするための方法とテクニック(写真)

他の人から「つまらない」とか「時代遅れ」というフィードバックを受けて、それを変更しようとしたのに、更...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

Dockerコンテナのホスト間マルチネットワークセグメント通信ソリューションの詳細説明

1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...

VMware12 インストール centOS8 構成グラフィック チュートリアルの詳細説明 (vm 仮想マシン インストール centos8 チュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...