Need Timer Countdown auf 60 zurückgesetzt, wenn mit Observables oder in irgendeiner Weise in Angular2 endet

Question

Ich entwickle Gebots-Website in Angular2. Ich brauche einen Timer für jedes Produkt, das bei 60 Sekunden beginnt und wenn es auf 0 wird es setzt wieder auf 60.

countDown; 
counter = 60; 

constructor() { 
     this.countDown = Observable.timer(0,1000) 
      .take(this.counter) 
      .map(() => --this.counter); 
} 

Der Zähler beginnt mit 60 Sekunden und endet mit 0. Aber ich kann nicht implementieren Reset-Teil, der 60 erneut zuzuweisen, um zu zähmen, wenn sein Wert auf 0 geht.

Ich weiß wenig über Obervables in RxJs. Kann mir jemand helfen?

Answer 1

Willkommen bei Stack Overflow!

Wir können etwas Mathe verwenden, um dies zu erreichen. Bitte lesen Sie Bonusteil 60 eine alternative

this.countDown = Observable 
    .timer(0, 1000) // emits 0, 1, 2, 3, 4, 5, 6, 7, 8... 
    .map(tick => 60 - (tick % 60)); // emits 60, 59, 58... 0, 60, 59... 

Wir nehmen den Rest der Teilung zu sehen - tick % 60

1 % 60 = 1 
2 % 60 = 2 
... 
60 % 60 = 0 
61 % 60 = 1 
... 

Wenn wir unten von 60 zählen wollen, dann müssen wir die subtrahieren Rest der Teilung von 60.

Bonus (Antwort auf die Frage im Kommentar)

Wenn Sie mit einer Zufallszahl beginnen möchten, müssen Sie eine Art von Zustand in der Observablen behalten. scan Betreiber dient diesem Zweck. In diesem Szenario ist der Operator timer ein Overkill, und wir können stattdessen interval verwenden.

function getRandomNumber() { // returns a random integer from 1 to 60 
    return Math.floor(Math.random() * 60) + 1; 
} 

Observable 
     .interval(1000) // emits every second 
     // `scan` works like `reduce` method of the array 
     // it keeps its own internal state in `acc` 
     // `acc` initial value is random and when it reaches 1, it has a new random integer assigned to it again 
     .scan(acc => acc === 1 ? getRandomNumber() : acc - 1, getRandomNumber()); 
     // emits e.g. 5, 4, 3, 2, 1, 10, 9, 8, 7, 6... 

Technisch können Sie ursprüngliches Problem lösen, indem getRandomNumber mit einer gewünschten Anzahl zu ersetzen.