Question

我在离子3 /角度5中有停止计时器（功能）的问题。我想要这样的东西，单击后退按钮到上一个视图，计时器应该停止。当我去查看B时，计时器将停止，当我回到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);

    }

当我离开视图时，我试图通过更改状态（布尔值）来停止它，但它不起作用。

Answer 1

您正在分配

 let status = this.status;

在函数定义之前

。这样，变量 status 在此函数中将始终具有相同的值。无论是真实还是错误，无论这种情况如何，这都是分配时的状态。你必须在你的函数中使用this.status。

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

但除此之外，应该说，你应该考虑使用setInterval和cancelInterval，因为它对你的问题来说是一个更清晰，更好的解决方案。当CPU忙时，setTimeout可能会跳过帧，导致倒计时不准确。

退出视图不会停止功能

1 个答案: