Angular service not triggering timer

Question

Angular service not triggering timer

I've developed a timer service file in Angular for countdown functionality

  
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TimerUtilService {

initial_module_timer_value = 300;
second_left:any;
module_finish_interval;
time_limit_over:any=false;

constructor() { }

start_countdown()
{ 
this.startTimer(this.initial_module_timer_value);
}

startTimer(duration) {
var timer = duration, minutes, seconds;
var self = this;
this.module_finish_interval= setInterval(() => { 
minutes = (timer / 60) | 0;
seconds = (timer % 60) | 0;
if(timer>=0)
{
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
this.second_left = minutes + ":" + seconds;

}
if(--timer < 0)
{
console.log('completed');
}
},1000);
}

end_countdown()
{  
clearInterval(this.module_finish_interval);
}
}

In my component, I aim to utilize this service

import { TimerUtilService } from '../../../shared/timer-util.service';

export class TestComponent implements OnInit {
constructor(private route: ActivatedRoute,private elem: ElementRef,private router: Router,private http: HttpClient,private timerService : TimerUtilService) {
this.timerService.start_countdown();
console.log(this.timerService.second_left);
}

The console displays a null value.

I intend to display a countdown timer in my component where it steadily decreases until reaching 00:00 seconds.

Thank you

angular typescript

Answer 1

Answer №1

When you're seeing a null result, it could be because the second_left variable is still undefined when calling

console.log(this.timerService.second_left);

.

To troubleshoot, try adding a console.log inside the service function to track what's going on behind the scenes:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TimerUtilService {

  initial_module_timer_value = 300;
  second_left:any;
  module_finish_interval;
  time_limit_over:any=false;

  constructor() { }
  start_countdown()
  { 
    this.startTimer(this.initial_module_timer_value);
  }
  startTimer(duration) {
    var timer = duration, minutes, seconds;
    var self = this;
    this.module_finish_interval= setInterval(() => { 

      //##################
      // Logging timer and seconds at every interval
      //#################
      console.log("Timer: " + timer);
      console.log("Seconds left: " + second_left);        

      minutes = (timer / 60) | 0;
      seconds = (timer % 60) | 0;
      if(timer>=0)
      {
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      this.second_left = minutes + ":" + seconds;
      if(timer==0)
      {
        console.log('completed');
      }  
      }
      },1000);
  }
  end_countdown()
  {  
  clearInterval(this.module_finish_interval);
  }
}

Answer 2

When you're seeing a null result, it could be because the second_left variable is still undefined when calling

console.log(this.timerService.second_left);

.

To troubleshoot, try adding a console.log inside the service function to track what's going on behind the scenes:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TimerUtilService {

  initial_module_timer_value = 300;
  second_left:any;
  module_finish_interval;
  time_limit_over:any=false;

  constructor() { }
  start_countdown()
  { 
    this.startTimer(this.initial_module_timer_value);
  }
  startTimer(duration) {
    var timer = duration, minutes, seconds;
    var self = this;
    this.module_finish_interval= setInterval(() => { 

      //##################
      // Logging timer and seconds at every interval
      //#################
      console.log("Timer: " + timer);
      console.log("Seconds left: " + second_left);        

      minutes = (timer / 60) | 0;
      seconds = (timer % 60) | 0;
      if(timer>=0)
      {
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      this.second_left = minutes + ":" + seconds;
      if(timer==0)
      {
        console.log('completed');
      }  
      }
      },1000);
  }
  end_countdown()
  {  
  clearInterval(this.module_finish_interval);
  }
}

Answer 3

Answer №2

If you're looking to initialize certain functions, consider placing them inside the ngOnInit() function like this:

ngOnInit(): void {
 this.timerService.start_countdown();
}

Give it a try within your startTimer() function as shown below:

var timer = duration, minutes, seconds;
var x = setInterval(() => { 
    minutes = (timer / 60) | 0;
    seconds = (timer % 60) | 0;
    if(timer>=0){
        timer=timer-1
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        var second_left = minutes + ":" + seconds;

        console.log(second_left);

        if(timer==0){
            console.log("cleared");
            clearInterval(x)
        }
    }
},1000)

Since the constructor is only called once, you will see only one console log showing 00:00 seconds.

Revised

An alternative approach is to implement the startTimer() directly in the TestComponent.ts file instead of using the TimerUtilService. If you prefer utilizing a service, you may need to explore the observable method, but be aware that this approach could potentially lead to performance issues and may not be ideal for continuous feedback.

Answer 4

If you're looking to initialize certain functions, consider placing them inside the ngOnInit() function like this:

ngOnInit(): void {
 this.timerService.start_countdown();
}

Give it a try within your startTimer() function as shown below:

var timer = duration, minutes, seconds;
var x = setInterval(() => { 
    minutes = (timer / 60) | 0;
    seconds = (timer % 60) | 0;
    if(timer>=0){
        timer=timer-1
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        var second_left = minutes + ":" + seconds;

        console.log(second_left);

        if(timer==0){
            console.log("cleared");
            clearInterval(x)
        }
    }
},1000)

Since the constructor is only called once, you will see only one console log showing 00:00 seconds.

Revised

An alternative approach is to implement the startTimer() directly in the TestComponent.ts file instead of using the TimerUtilService. If you prefer utilizing a service, you may need to explore the observable method, but be aware that this approach could potentially lead to performance issues and may not be ideal for continuous feedback.

Angular service not triggering timer

Answer №1

Answer №2

Similar questions

What is the solution to the strict mode issue in ANGULAR when it comes to declaring a variable without initializing it?

What is the procedure for resetting the pagination tool?

Exploring the integration of PrimeNG into an Angular 4 project

Encountering an ng build error while attempting to include a factory in the providers array

Navigating the intricate component tree structure in Angular 2: mastering the art of data element transmission

Issues with NextJS detecting environmental variables

Tips for showing JSON information in Nativescript

Is there a way to ensure that Tailwind CSS loads before rendering components in NextJS?

Resizing a d3 graph for various screen resolutions

Tips for simulating a "nested" angular service within a component using jest

ng serve: Module 'tapable' not found

Acquired this as empty

Error encountered when trying to match routes in two separate Angular applications within an Express app: "Cannot find any routes that match

Analyzing the elements of an array in JavaScript and making modifications to it based on their values

Tips on saving a cookie using universal-cookie

Unpacking a props object results in an undefined value

Assigning value to a member variable in a TypeScript Angular class

Attempting to use a string as an index for the type `{ firstName: { inputWarning: string; inputRegex: RegExp; }` is not allowed

Modifying preset values in settings.json within the [Extension Development Host] environment

Transferring pictures between folders