Exit view doesn't stop function

Question

I have a problem with stop timer (function) in ionic 3/ angular 5. I want something like this, click back button to previous view and the timer should stop. Timer will stop when I go to view B and it should again start when I come back to view A.

HTML:

<ion-footer>
    <ion-toolbar>
        <button ion-button type="submit" form="myForm" [disabled]="form.invalid" block>Zatwierdź</button>
        <div style="text-align: center; margin: 20px auto; font-size: 16px;">
            Czas do końca sesji:
            <span id="countdown"></span>
        </div>
    </ion-toolbar>
</ion-footer>

result.ts:

import { LocationsPage } from './../locations/locations';
import { ModalCountdownPage } from './../modal-countdown/modal-countdown';
import { ModalPage } from './../modal/modal';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { FormGroup, FormBuilder, Validators, AbstractControl } from '@angular/forms';
import { ModalController } from 'ionic-angular/components/modal/modal-controller';



@IonicPage({
    name: 'page-result',
    segment: 'page-result/',
})
@Component({
    selector: 'page-result',
    templateUrl: 'result.html',
})
export class ResultPage {

    form: FormGroup;

    name: AbstractControl;
    last_name: AbstractControl;
    mail: AbstractControl;
    phone: AbstractControl;
    notes: AbstractControl;

    emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";

    hour: any;
    date: any;
    worker: any[];
    location: any[];
    services: any[];


    constructor(private navCtrl: NavController, private navParams: NavParams, private fb: FormBuilder, private modal: ModalController, private viewCtrl: ViewController) {

        this.location = this.navParams.get('location') || null;
        this.services = this.navParams.get('services') || null;
        this.worker = this.navParams.get('worker') || null;
        this.date = this.navParams.get('date') || null;
        this.hour = this.navParams.get('hour') || null;


        let removeBr = this.date.replace(/[<]br[^>]*[>]/gi, " ");
        this.date = removeBr;




        this.form = this.fb.group({
            'name': ['', [Validators.required]],
            'last_name': ['', [Validators.required]],
            'mail': ['', [Validators.required, Validators.pattern(this.emailPattern)]],
            'phone': ['', [Validators.required]],
            'notes': ['', [Validators.required]]
        });

        this.name = this.form.get('name');
        this.last_name = this.form.get('last_name');
        this.mail = this.form.get('mail');
        this.phone = this.form.get('phone');
        this.notes = this.form.get('notes');




    }

    async submit() {
        if (this.form.invalid) {
            return false;
        }
    }




    status: boolean;

    countdown(elementName, minutes: number, seconds: number) {

        let element, endTime, mins, msLeft, time;
        let modal = this.modal.create(ModalCountdownPage);
        let nav = this.navCtrl;
        let view = this.viewCtrl.name;
        let status = this.status;
        function endSession() {
            modal.present();
            setTimeout(() => {
                nav.setRoot(LocationsPage);
            }, 500)

        }

        function twoDigits(n) {
            return (n <= 9 ? "0" + n : n);
        }

        function updateTimer() {
            msLeft = endTime - (+new Date);
            if (msLeft < 1000) {
                element.innerHTML = '00:00';
                console.log('status', status);
                console.log('view', view);

                endSession();

            } else {
                time = new Date(msLeft);
                mins = time.getUTCMinutes();
                element.innerHTML = mins + ':' + twoDigits(time.getUTCSeconds());
                setTimeout(updateTimer);



            }
        }
        element = document.getElementById(elementName);
        endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
        if (status === true) {
            updateTimer();
        }


    }





    ionViewDidLoad() {
        this.status = true;
        this.countdown('countdown', 0, 5);

    }


    ionViewDidLeave() {
        this.status = false;
        console.log('destroy', this.status);

    }

I tried stopping it with changing status(boolean) , when I leave the view, but it's not working.

Answer 1

You are assigning

 let status = this.status;

before your function definition. This way the variable status will always have the same value within your function from here on. It will either be true or false, whatever value this.status had at the time of assignment. You will have to use this.status inside your function instead.

if (this.status === true) {
  updateTimer();
}

But besides that, it should probably be said, that you should think about using setInterval and cancelInterval instead, because it's a cleaner and better soluton for your problem. setTimeout might skip frames, when your CPU is busy, resulting in an inaccurate countdown.