ObservablesまたはAngular2で終了するとタイマーカウントダウンが60にリセットされる必要があります

Question

私はAngular2で入札ウェブサイトを開発しています。私は60秒から始まり、それが0になったとき、それは60

countDown; 
counter = 60; 

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

に再びリセットされ、すべての製品のためのタイマ、カウンタが60秒で始まり、0で終わるしかし、私は実装できませんが必要その値が0になったときにカウンタを再び60に再割り当てするリセット部。

私はRxJのObervablesについてほとんど知っていません。誰でも助けてくれますか？

Answer 1

ようこそスタックオーバーフロー！

これを達成するために数学を使うことができます。 我々は60による除算の残りの部分を取っている

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... 

代替見るためにボーナスパーツをお読みください - 私たちは60からカウントダウンしたい場合は、私たちが引く必要がありtick % 60

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

を60.

ボーナス（コメントでの質問への答え）

0123から部門の残りの部分

乱数で始める場合は、観測対象にある種の状態を維持する必要があります。 scanオペレータがこの目的を果たします。このシナリオでは、timer演算子を使用することは過剰です。代わりにintervalを使用できます。

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... 

技術的にはあなたが必要な数でgetRandomNumberを置き換えることにより、元の問題を解決することができます。