Angular2でのdebounce（処理の間引き）は、RxJSの機能を使うと簡単に設定することが出来ます。
今日はdebounceの設定方法を紹介します。
debounceって何？
プログラミングでの「間引き処理」は頻繁に使います。
間引き処理というのは、連続した処理がある場合に、100ミリ秒に一度実行したり、最後の処理の500ミリ秒後に実行するなど、実行回数を間引く（減らす）ことを指します。
今回紹介するdebounce は、「連続処理される、最後の処理の500ミリ秒後に関数を実行する」間引き処理のことを言います。実行は1度きりです。
今回は紹介しませんが、他にも throttle があります。
使い方
今回の例として、検索窓の入力での間引き処理を設定してみましょう。
例えば、検索窓に入力した文字列をサーバに送る場合を想定してみます。
動きはデモを確認してみてください。
キーボードの keypress や keyup イベントで処理することも可能ですが、
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 に実際にテキストボックスに入力された文字列が渡ってくるので、処理してあげれば完了です。
