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 をよろしくお願いいたします。

以下もご興味があるかもしれません: