角2の後続カウンタ

Question

私には3つの機能があります。最初の機能、すなわちStart()がボタンクリックイベントで呼び出されます。 start()は、counter1（）によって設定された特定の秒後に別の関数startFilling()を呼び出します。このカウンタが減少し、テンプレートに表示されます。 startFilling()は別の（）によって設定された特定の秒後に別の関数checkCorrectness()を呼び出す必要があります。このカウンタも減少し、テンプレートに表示されます。

マイHTML：

<!-- Show counter --> 
<div align="center" style="margin-bottom:1cm;" *ngIf="counter1"> 
    <h5>Countdown {{counter1}}</h5> 
</div> 
<div align="center" style="margin-bottom:1cm;" *ngIf="counter2"> 
    <h5>Countdown {{counter2}}</h5> 
</div> 

私のコードは次のようになります。で、私は一つだけカウンターが画面上に表示されるようにしたい時：

counter1=5; 
counter2=null; 
myCounter1: any; 
myCounter2: any; 

start(){ 

    /* Set the counter to fire the startFilling() function after specific seconds */ 
    let timer = Observable.timer(1000,1000); 
    this.myCounter1 = timer.subscribe(t=> this.startFilling(t)); 

} 

startFilling(counter){ 

    this.counter1=this.counter1-1; 
    if(this.counter1==0){ 
     this.counter1=null; 
     alert("Filling finished") 
     this.myCounter1.unsubscribe(); 
     this.counter2=11; 
    } 

    if(this.level===1 || this.level===2 || this.level===3){ 

     let timer = Observable.timer(this.counter2, 1000); 
     this.myCounter2 = timer.subscribe(t=> this.checkCorrectness(t)); 
    } 

    if(this.level===4 || this.level===5 || this.level===6 || this.level===7){ 

     let timer = Observable.timer(this.counter2,1000); 
     this.myCounter2 = timer.subscribe(t=> this.checkCorrectness(t)); 
    } 

} 

checkCorrectness(counter){ 

    this.counter2=this.counter2-1; 
    if(this.counter2==0){ 
     this.counter2=null; 
     alert("Check correctness") 
     this.myCounter2.unsubscribe(); 
    } 

} 

ここで問題がありますある時点で私のケースは両方とも現れる。また、彼らは何とか重なり合い、否定的になる。

どうすればこの問題を解決できますか？

Answer 1

私はタイマーの作成方法とカウンタ2の時間を抽象化します。

counter1 = 5; 
counter2 = this.getCounter2Duration(); 
myCounter1 = this.subscribeToTimer(counter1,this.startFilling); 
myCounter2; 

// can create both counter1 and counter2 from this function. 
// start would be countdown seconds (5, 11) 
subscribeToTimer(start,callback){ 
     return Rx.Observable 
     .timer(1000, 1000) // timer(firstValueDelay, intervalBetweenValues) 
     .map(i => start-i) 
     .take(start + 1) 
     .subscribe(i => { 
     if(start - i === 0){ 
      callback(); 
     }; 
     }) 
    } 

getCounter2Duration(){ 
//conditional level checking 
    if(this.level===1 || this.level===2 || this.level===3){ 
     return 11; 
    } 
    if(this.level===4 || this.level===5 || this.level===6 || this.level===7){ 
     return 14; 
    } 
} 

startFilling(){ 
     this.counter1 = null; 
     alert('Filling Finished'); 
     this.myCounter1.unsubscribe(); 
     this.myCounter2 = this.subscribeToTimer(this.counter2,this.checkCorrectness); 
    } 

checkCorrectness(){ 
    this.counter2 = null; 
    alert('Check correctness finished'); 
    this.myCounter2.unsubscribe(); 
} 

Answer 2

私は、次のように私のコードを修正し、それが動作します：

startFilling(counter){ 

    this.counter1=this.counter1-1; 
    if(this.counter1==0){ 
     this.counter1=null; 
     alert("Filling finished") 
     this.myCounter1.unsubscribe(); 

     if(this.level===1 || this.level===2 || this.level===3){ 

      this.counter2=11; 
      let timer2 = Observable.timer(1000, 1000); 
      this.myCounter2 = timer2.subscribe(t=> this.checkCorrectness(t)); 
     } 

     if(this.level===4 || this.level===5 || this.level===6 || this.level===7){ 

      this.counter2=14; 
      let timer2 = Observable.timer(1000, 1000); 
      this.myCounter2 = timer2.subscribe(t=> this.checkCorrectness(t)); 
     } 
    }  
} 

checkCorrectness(counter){ 

    this.counter2=this.counter2-1; 
    if(this.counter2==0){ 
     this.counter2=null; 
     alert("Check correctness finished") 
     this.myCounter2.unsubscribe(); 
    } 

} 

やって、任意のより良い方法があれば、親切に示唆しています。