如何通过 RxJS 中的点击流从一个流中遍历数组？

Question

我是 rxjs 的新手，遇到了一个简单的任务。假设我有一个带有数组的流：

var array$ = Rx.Observable.just([1, 2, 3, 4, 5]);

我还有另一个点击流：

var click$ = Rx.Observable.fromEvent(
  document.getElementById('button'),
  'click'
)

如何组合它们以在每次点击时从数组中获取每个元素（第一次点击 1 个，第二次点击 2 个，依此类推）？

Answer 1

just() 将 return 整个数组。您想要使用 fromArray() 创建第一个流。然后你可以将两个数组压缩在一起以获得数组流中的下一个元素：

var array$ = Rx.Observable.fromArray([1, 2, 3, 4, 5]);

var click$ = Rx.Observable.fromEvent(
  document.getElementById('button'),
  'click'
).zip(array$, function(click, num) {return num}).subscribe(function(el){
  return el;
})

<script src="//cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.all.js"></script>
<button id="button">
  button
</button>

Answer 2

有很多方法可以做到这一点。简单的如下：

var click$ = Rx.Observable.fromEvent(
  document.getElementById('button'),
  'click'
);

var combined$ = otherButtonClick$.flatMapLatest(function (){
 return click$
  .map(function(value, index){return index;})
  .withLatestFrom(array$, function(index, array){return array[index];})
 });

你有没有想通过这个实现更大的目标？

Answer 3

您需要使用一些背压机制，例如：

示例 1：

var array$ = Rx.Observable.from([1, 2, 3, 4, 5]).controlled;

var click$ = Rx.Observable.fromEvent(
  document.getElementById('button'),
  'click'
)

array$.subscribe(function(value){ console.log(value); });

click$.subscribe(function(){
  array$.request(1);
})

示例 2（使用组合）

var array$ = Rx.Observable.from([1, 2, 3, 4, 5]).controlled;

var click$ = Rx.Observable.fromEvent(
  document.getElementById('button'),
  'click'
)

click$.flatMap(function(){
  return Rx.Observable.create(function(observer){
    array$.first().subscribe(observer);
    array.request(1);
  }
})
.subscribe(function(value){ console.log(value); });

如何通过 RxJS 中的点击流从一个流中遍历数组？

How to traverse array from one stream by clickstream in RxJS?

javascript

reactive-programming

rxjs