3

私は ReactiveExtensions を初めて使用し、仕事に就けません。非常に一般的なユースケースだと思います。新しい次の値がなく、一定期間が経過した後にのみ新しい値を受け取りたい。下の例では、この期間は 1 秒です。debounce-operatorはまさに私がやりたいことをしているようです。私はそれを動作させません。

const observable$ = new Rx.Observable(observer => {

 observer.next('start');

 setTimeout(() => {
  observer.next(1);
 }, 100);
 setTimeout(() => {
  observer.next(2);
 }, 200);
 setTimeout(() => {
  observer.next(3);
 }, 300);
 setTimeout(() => {
  observer.next(4);
 }, 400);

 setTimeout(() => {
  observer.next('end');
 }, 1500);
});

let sub = observable$
      .debounce(1000) //debounce(1000, null) does not work either
      .take(100)
      .subscribe(data => {
          console.log(data);
         }, 
         err => console.log(err.message), 
         complete => console.log('Observable completed')
       )

私が取得したいのは、次のコンソール出力のみです。

"start"
"end"

ドキュメントには 2 番目の引数はオプションであると記載されていますが、私の IDE (Webstorm) では、上記のコードはコンパイルさえしません。jsbin.comで、「 this.durationSelector.callは関数ではありません」というエラーが表示されます (rxjs でスケジューラを適用する方法はまだわかりません)。ドキュメントでは、彼らも数字のみを使用しています。Google で見つけたデバウンスのほとんどの例では、数値のみを使用しています。つまり、このStackoverflow の例です。私の場合、これがうまくいかないのはなぜですか?

ご協力いただきありがとうございます!

PS: rxjs 5.0.0-beta.6 を使用しています。

編集:ここでの回答の助けを借りて、私が望んでいた実際の解決策を見つけました:

const observable$ = new Rx.Observable(observer => {

observer.next('start');

 setTimeout(() => {
  observer.next(1);
 }, 1100); //<-- If you change 1100 to i.e. 900 you just get "end" in the output, because there is no 1s periode during which no new value arrives. 
 setTimeout(() => {
  observer.next(2);
 }, 1200);
 setTimeout(() => {
  observer.next(3);
 }, 1300);
 setTimeout(() => {
  observer.next(4);
 }, 1400);
 setTimeout(() => {
  observer.next(5);
 }, 1500);

 setTimeout(() => {
  observer.next('end');
 }, 1501);


});

let sub = observable$
      .debounceTime(1000)
      .take(10)
      .subscribe(data => {
         console.log(data);
       }, 
       err => console.log(err.message), 
       complete => console.log('Observable completed')
);
4

2 に答える 2