Change detection works only first property updated by setInterval but fails on the second property

@bobmintons wrote:

I have a curious issue. I have 2 timer clocks that count up. One for recording and one for playback.
The recording clock UI is updated during recording but the playback clock will not. It seems that change detection only works on the first property but not on the second. Each of property is updated by its own instance of a setInterval timer.

From logs – I can see that the playback interval timer is firing and updating the playback clock property, but the View is not being updated!

What’s going on behind the scene? I would like to understand better how when view update is triggered in Ionic.

Thanks in advance

// template
<ion-col>
<div>RECORDING: {{clock_rec}}</div> /* UPDATES with each interval tick*/
</ion-col>
<ion-col >
<div >PLAYING: {{clock_play}}</div> /* DOES NOT UPDATE with interval tick. Updates only after playback complete! */
</ion-col>

export class RecordIntroPage {

// Recording clock
clock_rec: string = '00:00';
elapsed_rec: number = 0; // ms
intervalId;

// playback clock
clock_play: string = '00:00';
elapsed_play: number = 0;
intervalId_play;

onStart(  ){
    let that = this;
    let updateHandlerFn = (status) => { 

        if (status == MEDIA_STATUS.RUNNING){
            // start recording clock
            that.intervalId = setInterval( function() {
                that.elapsed_rec += 500
                console.log('Elapsed time (s):', that.elapsed_rec/1000);
                that.clock_rec = that.clockFormat(Math.floor(that.elapsed_rec/1000));
                console.log('Clock (s):', that.clock_rec );
                }, 500);
        }
        else if (status == MEDIA_STATUS.STOPPED){
            // clean up
            that.recSvc.releaseMedia();
            clearInterval(that.intervalId);
        }
    }      
}

onPlay( ){
    if (status == MEDIA_STATUS.RUNNING){
        // start playback clock
        that.intervalId_play = setInterval( function() {
            that.elapsed_play += 500;
            console.log('Play Elapsed time (s):', that.elapsed_play/1000);
            that.clock_play = that.clockFormat(Math.floor(that.elapsed_play/1000));
            console.log('Clock (s):', that.clock_play);
            }, 500);
    }
    else (status == MEDIA_STATUS.STOPPED){
        that.recSvc.releaseMedia();
        clearInterval(that.intervalId_play);
    }

}

Posts: 1

Participants: 1

Read full topic