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

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

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 2

just（）将返回整个数组。您想使用fromArray（）来创建第一个流。然后，您可以将两个数组压缩在一起以获取数组流中的下一个元素：

＆＃13;

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;
})

＆＃13;

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

＆＃13;

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中通过点击流从一个流遍历数组？

3 个答案: