RxJS：可編程定時器

Question

我試圖使用Observables在數組元素之間插入一個可變的時間延遲。 在這個例子中，我想在屏幕上水平移動一個兔子圖標。 就像在拱廊的水槍比賽。 這是我的輸入數組

    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語句，並將結果選擇器[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計時器，因為這可能會給你帶來內存問題。