Jump to the content

Angular2でdebounceを設定する

Angular2

    Angular2でdebounceを設定する

    Angular2でのdebounce(処理の間引き)は、RxJSの機能を使うと簡単に設定することが出来ます。 今日はdebounceの設定方法を紹介します。

    debounceって何?

    プログラミングでの「間引き処理」は頻繁に使います。 間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く(減らす)ことを指します。

    今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。

    今回は紹介しませんが、他にも throttle があります。

    使い方

    今回の例として、検索窓の入力での間引き処理を設定してみましょう。 例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。

    動きはデモを確認してみてください。

    キーボードの keypresskeyup イベントで処理することも可能ですが、 RxJSで用意されている debounceTime メソッドを使用するほうが、はるかに簡単です。

    サンプルコードを見てみましょう。

    import { Component } from '@angular/core';
    import { Control } from '@angular/common';
    import 'rxjs/Rx';
    
    @Component({
      selector: 'my-app',
      providers: [],
      template: `
        <div>
          <h2>Debounce in Angular2</h2>
          <input type="text" [ngFormControl]="searchControl">
          <p>result: </p>
        </div>
      `,
      directives: []
    })
    export class App {
    
      searchControl = new Control();
      searchText = '';
    
      constructor() {
    
        this.searchControl.valueChanges
          .debounceTime(500)
          .subscribe(value => {
              this.searchText = value;
          });
    
      }
    }
    

    debounce処理はRxJSの機能を使うので、import 'rxjs/Rx' を追加しておきます。

    その次に、Control クラスでテキストボックスを取得します。Controlはフォームパーツにアクセスするクラスです。 このクラスを使うことで、テキストボックスの変更検知ができます。

    テキストボックスに入力があると、Control クラスの valueChanges プロパティに変更情報が格納されます。 これは、RxJSのObservableという配列のようなコレクションが格納されるので、RxJSの処理を施すことができます。

    その変更内容に対して、debounceTime(500) を実行します。これは、連続入力された、最後の入力の500ミリ秒後に一度処理する指定になります。 ここで渡す引数が遅延時間になります。

    最後に、subscribe() の引数 value に実際にテキストボックスに入力された文字列が渡ってくるので、処理してあげれば完了です。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×