This situation is quite perplexing. I have a timer function that works perfectly on all my components except one. Strangely, I can't seem to figure out why this particular component is not cooperating, especially since there are no error messages appearing.
What could I be missing? Here is the code structure that I am using:
The HTML snippet:
<p>Time in milliseconds: <b id="tick">{{time}}</b></p>
and in my protected.component.ts file:
timeBegin = new Date();
starts = null;
time = '00:00:00.000';
GetUser(): void {
this.startTime();
this.dataService.getUser().subscribe(res => {
if (res !== undefined) {
this.dataIsReady = true;
this.imgSrc = 'data:image/png;base64,' + res['image'];
}
});
this.stopTime();
}
public clockRun() {
const currentTime = new Date();
const timeElapsed = new Date(currentTime.getTime() - this.timeBegin.getTime());
const hour = timeElapsed.getUTCHours();
const min = timeElapsed.getUTCMinutes();
const sec = timeElapsed.getUTCSeconds();
const ms = timeElapsed.getUTCMilliseconds();
this.time =
(hour > 9 ? hour : '0' + hour) + ':' +
(min > 9 ? min : '0' + min) + ':' +
(sec > 9 ? sec : '0' + sec) + '.' +
(ms > 99 ? ms : ms > 9 ? '0' + ms : '0' + ms);
}
startTime() {
this.timeBegin = new Date();
this.starts = setInterval(this.clockRun.bind(this), 10);
}
stopTime() {
clearInterval(this.starts);
}