ANGULAR: Inject Another Function after unsubscribing from Timer Observable

Question

I am creating an exam app so when time is up i needed a view controller to pop to tell the user he has exceeded his time and take him/her to a results page!!

But after unsubscribing from the timer, my function gets into a loop!!!

Please, i need help with this..

My codes below!

minutesDisplay: number = 0;
hoursDisplay: number = 0;
secondsDisplay: number = 0;

sub: Subscription;

showAlert() {
    let alert = this.alertCtrl.create({

      subTitle: 'Ooops, Time Up! ',
    });
    alert.present();
    this.activity.openModal();
  }

ngOnInit() {
    this.startTimer();
}

public ngOnDestroy() {
    if (this.minutesDisplay == 1){
        this.sub.unsubscribe();
    }

    return true;

}

private startTimer() {
    let timer = Observable.timer(1, 1000);
    this.sub = timer.subscribe(
        t => {
            this.ticks = t;
            this.secondsDisplay = this.getSeconds(this.ticks);
            this.minutesDisplay = this.getMinutes(this.ticks);
            this.hoursDisplay = this.getHours(this.ticks);
            this.ngOnDestroy();
        }
    ); 
    this.showAlert();
 }

Could you set a plunker, please?How do you see the loop? The alert shows all the time? — Vega
– Vega, Commented Aug 31, 2017 at 22:27
Yes, a plunker would be very helpful here. Otherwise we are just guessing at syntax. — DeborahK
– DeborahK, Commented Aug 31, 2017 at 22:33

DeborahK · Accepted Answer · 2017-08-31 22:37:37Z

1

I didn't try this ... but you could try the following:

public ngOnDestroy() {
    this.sub.unsubscribe();  // Stop the timer if the user navigates elsewhere
}

private startTimer() {
    let timer = Observable.timer(1, 1000);
    this.sub = timer.subscribe(
        t => {
            this.ticks = t;
            this.secondsDisplay = this.getSeconds(this.ticks);
            this.minutesDisplay = this.getMinutes(this.ticks);
            this.hoursDisplay = this.getHours(this.ticks);
            if (this.minutesDisplay == 1){
               this.sub.unsubscribe();  // Stop the timer when time is up.
               this.showAlert();        // Show the alert now
            }
        }
    ); 
 }

answered Aug 31, 2017 at 22:37

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Vega Over a year ago

I was thinking of the same :)

Seyi Daniels Over a year ago

@DeborahK still returning same loop

DeborahK Over a year ago

You'll really need to provide a plunker for us to better examine how this is working. Go to this site: plnkr.co/edit/?p=catalogue Drop down the list from the big green New button and select 'Angular'. Then add your code to the generated files. If you can demonstrate the issue there ... we can work with the code to resolve it.

DeborahK Over a year ago

Also ... will this.minutesDisplay ever be 1? What does your getMinutes method do?

Seyi Daniels Over a year ago

plnkr.co/edit/qk2c9nr6dBn2jWeaVf8d? thats the link to the code, you get to see what my getMInutes function does!!!

|

Buggy · Accepted Answer · 2017-09-05 09:26:37Z

0

Observable.timer(1, 1000)
  .map(t=>this.getMinutes(t) === 1) // Observable<tick> -> Observable<boolean>
  .first(istimeUp => istimeUp) // take first Observable<true>
  .subscribe(()=>this.showAlert())

answered Sep 5, 2017 at 9:26

Buggy

3,6691 gold badge23 silver badges38 bronze badges

Collectives™ on Stack Overflow

ANGULAR: Inject Another Function after unsubscribing from Timer Observable

2 Answers 2

10 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related