Angular2後續計數器

Question

我有三個功能。在按鈕點擊事件上調用第一個功能，即Start()。 start()在counter1（這個計數器遞減並且我在我的模板上顯示它）指定的特定秒數後調用另一個功能startFilling()。 startFilling()應該在另一個counter2（這個計數器也遞減並且我在我的模板上顯示它）顯示特定秒數後調用另一個函數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(); 
    } 

} 

如果有做的任何更好的辦法，請建議。