Angular2 subsequent counters

Question

I have three functions. First function i.e. Start() is called on a button click event. start() calls another function startFilling() after specific seconds set by counter1 (this counter decrements and I show it on my template). startFilling() should call another function checkCorrectness() after specific seconds set by another counter2 (this counter also decrements and I show it on my template).

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

My code looks like following:

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();
    }

}

The problem here is: At a time I want only one counter to be visible on the screen, in my case at some point they both show up. Also, they are somehow overlapping and go into negative.

How can I fix this?

Answer 1

I would abstract the timer creation method as well as the counter2 duration.

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

I modified my code like following and it works:

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();
    }

}

If there is any better way of doing, kindly suggest.