Question

我试图使用Observables在数组元素之间插入一个可变的时间延迟。在这个例子中，我想在屏幕上水平移动一个兔子图标。就像在拱廊的水枪比赛。这是我的输入数组

    var inputArray = [
       {locationX: 100, timeDelay: 2000},
       {locationX: 500, timeDelay: 8000},
       {locationX: 700, timeDelay: 3000}
    ]

在这个例子中，兔子会在2秒后移动到位置100px，然后在8秒延迟后移动到位置500p ......等等。

    var obs = Rx.Observable.from(inputArray)
        .flatMap( x => return Rx.Observable.timer(x.timeDelay) )

上述代码不起作用。我只是循环通过阵列没有时间延迟。有什么想法吗？

Answer 1

这是一个工作示例，您必须消除return语句，并将结果选择器[function]添加到flatMap，它将迭代每个元素并将其传递给您的订阅。这里有工作示例http://jsbin.com/jutizataji/edit?js,console,output

var inputArray = [
       {locationX: 100, timeDelay: 500},
       {locationX: 500, timeDelay: 1000},
       {locationX: 700, timeDelay: 5000}
    ]

Rx.Observable
  .from(inputArray)
  .flatMap(x => Rx.Observable.timer(x.timeDelay), (x) => x)

  // here x represent each object inside your input array, to access location do x.locationX
  .subscribe((x) => { console.log(x); });

Answer 2

你非常接近。 flatMap将在可用时（.merge行为）立即执行每个发射。使用.concatMap它将在下一个开始之前处理当前发射：

    var inputArray = [
           {locationX: 100, timeDelay: 500},
           {locationX: 500, timeDelay: 1000},
           {locationX: 700, timeDelay: 5000}
        ]
    
    Rx.Observable
      .from(inputArray)
      .concatMap(i => Rx.Observable.just(i).delay(i.timeDelay))
      .subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

根据Miguel Lattuada的回答，最好不要让n计时器运行，因为这可能会给你带来内存问题。

RxJS：可编程定时器

2 个答案: