[HELP] Functions are not finishing execution after pop?

Ionic Framework ionic-v3
1

Hello people, I have a problem and I would like to know if anyone can help me.

I will give some context:

I have a main page, from which I navigate to another containing a circle, which enlarges and infinitely shrinks with css3 shapes. All this works well.

Within this circle I have a paragraph that changes dynamically from the controller. As the length of the word changes, I must dynamically change the ‘left’ property of the paragraph. Then I move it dynamically with javascript. This also works fine, but the problem occurs when I pop ().

When I pop (), return to the previous page and then about 1 second, I get this error:

TypeError: Can not read property 'style' of null
     At BreathePage.centerInstruction (breathe.ts: 54)

Apparently, it’s as if the functions of the second page would continue to run even though I did pop().
It seems that it continues searching for this property being in the main page, reason why obviously does not exist.

This is my breathe.ts:

import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as $ from 'jquery';

@Component({
    selector: 'page-breathe',
    templateUrl: 'breathe.html'
})
export class BreathePage {
    readonly BREATHE_INSTRUCTION_INHALE: string = 'Inhala';
    readonly BREATHE_INSTRUCTION_HOLD: string = 'Mantiene';
    readonly BREATHE_INSTRUCTION_EXHALE: string = 'Exhala';
    // Must total 8000
    readonly TIME_INHALING: number = 2500;//1800;
    readonly TIME_HOLDING: number = 1300;//1700;
    readonly TIME_EXHALING: number = 4100;//4300;

    breatheInstruction: string;

    constructor(public navCtrl: NavController,
                private zone: NgZone
    ) {
        this.breatheInstruction = this.BREATHE_INSTRUCTION_INHALE;
    }

    ionViewDidEnter() {
        this.breatheInstruction = this.BREATHE_INSTRUCTION_INHALE;
        this.switchInstruction();
    }

    public switchInstruction(): void {

        this.breatheInstruction = this.BREATHE_INSTRUCTION_INHALE;

        var hold = setTimeout(() => {
            clearTimeout(hold);
            this.breatheInstruction = this.BREATHE_INSTRUCTION_HOLD;
            this.centerInstruction();

            var exhale = setTimeout(() => {
                clearTimeout(exhale);
                this.breatheInstruction = this.BREATHE_INSTRUCTION_EXHALE;
                this.reestablishInstructionPosition();

                var repeat = setTimeout(() => {
                    clearTimeout(repeat);
                    this.switchInstruction();

                }, this.TIME_EXHALING);
            }, this.TIME_HOLDING);
        }, this.TIME_INHALING);
    }

    public centerInstruction(): void {
        /*$('.element p').css({
            'left' : '36%'
        });*/
        document.getElementById('instruction').style.left = '36%';
    }

    public reestablishInstructionPosition(): void {
        /*$('.element p').css({
            'left' : '40%'
        });*/
        document.getElementById('instruction').style.left = '40%';
    }

    public breathClose(): void {
        this.navCtrl.pop();
    }
}

I tried doing this with jquery (as you can see the code commented) and does not throw errors, but it works poorly, the paragraph constantly changes its left property, does not respect the normal workflow.

Any ideas?

Thanks in advance!!

2

I would guess that your primary problem is not tearing down your timer in ionViewWillLeave, but you should also be able avoid direct DOM access by instead binding [style.left] to a property in the component and just twiddling that.

1 Like
3

I did not know I could do it that way, I’m still not quite familiar with angular 2

Thank you!!

4

If i want that paragraph to have a “hide” and “fadeIn” effect every time i change its content, how could i do it by working this way?

Now i have:
<p [style.left]="instructionPosition">
{{ breatheInstruction }}

`

and switch it:

public centerInstruction(): void {
        this.instructionPosition = this.FIX_INSTRUCTION_POSITION;
}

public reestablishInstructionPosition(): void {
    this.instructionPosition = this.DEFAULT_INSTRUCTION_POSITION;
}
5

Perhaps the angular animation docs would help you.

1 Like