RxJS:可编程定时器

Question

我尝试使用观察值在数组元素之间插入一个可变的时间延迟。在这个例子中，我想要在屏幕上水平移动一个兔子图标。就像游戏厅里的水枪比赛。下面是我的输入数组

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

在这个例子中，兔子将在2秒后移动到100px位置，然后在8秒延迟后移动到500px位置，依此类推……

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

上面的代码不起作用。我只是在没有时间延迟的情况下循环数组。有什么想法吗？

Answer 1

这里是一个工作示例，您必须删除return语句，并向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>

​

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