Angular2でdebounceを設定する

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 に実際にテキストボックスに入力された文字列が渡ってくるので、処理してあげれば完了です。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。Udemyでプログラミング解説の講師や、ドローンを使った映像制作も行っています。

プロフィール