如何用RxJS Observables製作倒數計時器？

我正在努力使用Observables創建倒數計時器，http://reactivex.io/documentation/operators/timer.html的示例似乎不起作用。在這個特定的例子中，與timerInterval相關的錯誤不是從定時器返回的Observable的函數。如何用RxJS Observables製作倒數計時器？

我也一直在嘗試其他辦法，我已經拿出最好的是：

Observable.interval(1000).take(10).subscribe(x => console.log(x));

這裏的問題是，它從0到10計數了，我希望有一個倒數計時器例如10,9,8 ... 0。

我也試過，但在timer不適合類型可觀察

Observable.range(10, 0).timer(1000).subscribe(x => console.log(x));

形式以及，產生任何輸出。

Observable.range(10, 0).debounceTime(1000).subscribe(x => console.log(x));

爲了澄清我需要ReactiveX的RxJS實現，而不是的Mircosoft版本的幫助。

來源

2016-01-21 Jonathan Miles

你在正確的軌道上 - 你的問題是，timer不會對原型（從而對Observable.range()），但可觀察到的存在（見RxJS docs）。即jsbin

const start = 10; 
Rx.Observable 
    .timer(100, 100) // timer(firstValueDelay, intervalBetweenValues) 
    .map(i => start - i) 
    .take(start + 1) 
    .subscribe(i => console.log(i)); 

// or 
Rx.Observable 
    .range(0, start + 1) 
    .map(i => start - i) 
    .subscribe(i => console.log(i));

來源

2016-01-21 11:15:43

謝謝您的建議。它確實有效，它只是覺得應該有更簡單的方法來與Observables做到這一點。理想情況下，迭代器運算符允許向下計數而不是範圍（開始，計數），這隻會增加。 –

希望別人能提供一種方式。在那之前：您是否考慮過擴展Observable的原型來隱藏實現（例如[像這樣]（https://github.com/Nupf/cull/blob/master/src/Observable.js））？ –

有一個操作員這樣做，「生成」它尚未添加到新項目中。 – paulpdaniels

區間，允許你指定一個第二個是多久

const time = 5 // 5 seconds var timer$ = Rx.Observable.interval(1000) // 1000 = 1 second timer$ .take(time) .map((v)=>(time-1)-v) // to reach zero .subscribe((v)=>console.log('Countdown', v))

來源

2018-02-02 21:55:55

如何用RxJS Observables製作倒數計時器？

回答

相關問題