web-dev-qa-db-de.com

Wie erstelle ich einen Countdown-Timer mit RxJS Observables?

Ich habe Probleme, mit Observables einen Countdown-Timer zu erstellen. Die Beispiele unter http://reactivex.io/documentation/operators/timer.html scheinen nicht zu funktionieren. In diesem speziellen Beispiel ist der Fehler im Zusammenhang mit timerInterval keine Funktion der vom timer zurückgegebenen Observable.

Ich habe auch mit anderen Ansätzen experimentiert und das Beste, was ich mir ausgedacht habe, ist:

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

Das Problem hierbei ist, dass es von 0 bis 10 hochzählt und ich einen Countdown-Timer möchte, z. 10,9,8 ... 0.

Ich habe es auch versucht, aber die timer existiert nicht für den Typ Observable

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

Sowie, die überhaupt keine Ausgabe erzeugt.

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

Zur Verdeutlichung benötige ich Hilfe bei der RxJS-Implementierung von ReactiveX, nicht bei der MircoSoft-Version.

10
Jonathan Miles

Sie waren auf dem richtigen Weg - Ihr Problem war, dass timer nicht auf dem Prototyp (und damit auf Observable.range()), sondern auf Observable (siehe RxJS docs ) existiert. Das heißt 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));
23
Niklas Fasching

Mit Intervall können Sie angeben, wie lang eine Sekunde ist

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))
0
Zafer Qadi

Ich bin der take...() Liebhaber, also benutze ich takeWhile() wie folgt (RxJS 6.x.x, auf ES6 Art und Weise)

import {timer} from 'rxjs';
import {takeWhile, tap} from 'rxjs/operators';


let counter = 10;
timer(1000, 1000) //Initial delay 1 seconds and interval countdown also 1 second
  .pipe(
    takeWhile( () => counter > 0 ),
    tap(() => counter--)
  )
  .subscribe( () => {
    console.log(counter);
  } );
0
Bayu