Wie stellen Sie den countdown-timer mit RxJS Observablen?

Ich bin kämpfen, um erstellen Sie einen countdown-timer mit Observablen, die Beispiele auf http://reactivex.io/documentation/operators/timer.html nicht zu funktionieren scheint. In diesem konkreten Beispiel wird der Fehler bezogen auf timerInterval nicht eine Funktion des Beobachtbaren kehrte aus-timer.

Habe ich auch schon experimentiert mit anderen Ansätzen und die beste, die ich mir ausgedacht habe ist:

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

Das problem hier ist, es zählt von 0 bis 10 und ich will einen countdown-timer z.B. 10,9,8...0.

Habe ich auch versucht, aber die timer nicht vorhanden für Typ Beobachtbaren

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

Sowie, die erzeugt keine Ausgabe überhaupt.

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

Zu klären, ich brauche Hilfe mit ReactiveX ist RxJS Umsetzung, nicht die MircoSoft-version.

InformationsquelleAutor Jonathan Miles | 2016-01-21
  1. 23

    Waren Sie auf dem richtigen Weg - Ihr problem war, dass timer existiert nicht auf dem Prototyp (und damit auf Observable.range()), sondern auf Beobachtbare (siehe RxJS docs). I. e. 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));
    • Vielen Dank für Ihren Vorschlag. Es funktioniert, es fühlt sich an wie es sollte einfachere Wege, dies zu tun mit Observablen. Idealerweise einen iterator operator, der es erlaubt, count-down, anstatt range(start, count), die nur in Schritten.
    • Hoffentlich jemand anderes kann einen Weg finden. Bis dahin: Haben Sie als Verlängerung der Prototyp der Beobachtbaren verbergen der implementation (z.B. wie folgt)?
    • Es ist ein operator, der dies tut, generate es nur noch nicht Hinzugefügt worden, um das neue Projekt noch nicht.
    • Ich sah die generate Funktion in v4, ich bin überrascht, es ist nicht in der v5. Es würde mir anbieten, die Funktionalität, die ich brauche.
    InformationsquelleAutor Niklas Fasching
  2. 1

    Mit Intervall, das Sie angeben können, wie lange 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))
    InformationsquelleAutor Zafer Qadi
Schreibe einen Kommentar