web-dev-qa-db-ja.com

RxJSは時間の経過とともに配列項目を出力しますか？

単純な配列値を500ms間隔で次々に放出しようとしています：

var a = Rx.Observable.from([1,2,3]);
a.interval(500).subscribe(function(b) { console.log(b); });

ただし、これは例外をスローします。

Uncaught TypeError: a.interval is not a function.
rxjs
20
Bryce

Xgrommxですでに指摘したように、intervalはオブザーバブルのインスタンスメンバーではなく、Rx.Observableの静的メンバーです。

Rx.Observable.fromArray([1,2,3]).Zip(
  Rx.Observable.interval(500), function(a, b) { return a; })
.subscribe(
  function(x) { document.write(x + '<br \>'); },  
  null,  
  function() { document.write("complete"); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.min.js"></script>
15
Oliver Weichhold

RxJSバージョン6でそれを行う3つの方法：

1. concatMapを使用する

import { from, of, pipe } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

from(array)
 .pipe(
   concatMap(val => of(val).pipe(delay(1000))),
 )
 .subscribe(console.log);

2. Zipとintervalを使用する

import { from, pipe, interval } from 'rxjs';
import { delay, Zip} from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

from(array)
 .pipe(
   Zip(interval(1000), (a, b) => a),
 )
 .subscribe(console.log);

3. intervalをソースとして使用する

import { interval, pipe } from 'rxjs';
import { map, take } from 'rxjs/operators';

const array = [1, 2, 3, 4, 5];

interval(1000)
.pipe(
  take(array.length),
  map(i => array[i])
)
.subscribe(console.log);
9
Michael P. Bazos

これは私がそれをする方法です：

var fruits = ['Apple', 'orange', 'banana', 'Apple'];
var observable = Rx.Observable.interval(1000).take(fruits.length).map(t => fruits[t]);
observable.subscribe(t => {
  console.log(t);
  document.body.appendChild(document.createTextNode(t + ', '));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.2/rx.all.min.js"></script>
9
pixelbits

私はWeichhold技術が最善であると思いますが、Zipの外でzipされた値を抽出することで意図を明確にすることができます。

// assume some input stream of values:
var inputs = Obs.of(1.2, 2.3, 3.4, 4.5, 5.6, 6.7, 7.8);
// emit each value from stream at a given interval:
var events = Obs.Zip(inputs, Obs.interval(1000))
    .map(val => val[0])
    .forEach(console.log);
1
Oliver

かなり遅いですが、より簡単な解決策は次のとおりです。

const arr = ["Hi,", "how", "may", "I", "help", "you?"];

Rx.Observable.interval(500)
             .takeWhile(_ => _ < arr.length)
             .map(_ => arr[_])
             .subscribe(_ => console.log(_))
1
Ishan Soni
var arrayList = [1,2,3,4,5];

var source = Rx.Observable
      .interval(500/* ms */)
      .timeInterval()
      .take(arrayList.length);

source.subscribe(function(idx){
    console.log(arrayList[idx]);
   //or document.write or whatever needed
});
1
silverfighter