Executing Timers in Angular 5 Service

Question

Executing Timers in Angular 5 Service

I am working on implementing a property called currentAndLastVehicles in my service that needs to be updated automatically every second.

Here is what I have so far:

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

@Injectable()
export class SharedDataService {

  constructor() {
    setTimeout(() => {
      console.log("hello");
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(), ...this.currentAndLastVehicles];
    }, 1000);
  }

  public currentAndLastVehicles: string[] = [];
}

Challenges I am facing:

The setTimeout function is only executed once, probably because it is inside the constructor.
Placing setTimeout outside of the constructor results in multiple errors.

Can anyone suggest a solution to achieve the desired functionality?

angular typescript

Answer 1

Answer №1

To keep a function running at certain intervals, utilize the setInterval method.

The function will continue to execute until you explicitly call clearInterval. To stop the interval, create a method in your service and invoke it within the ngOnDestroy lifecycle hook of the AppComponent.

Within your constructor, initialize a variable like this:

constructor(){
     this.intervalInstance = this.startInterval();
}

Your service should have a function defined as follows:

startInterval() {
   setInterval(()=>{
      this.dataArray = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.dataArray];
},10000)

In the app component's ngOnDestroy method, call:

ngOnDestroy() {
  this.service.stopInterval()
}

In your service, define the following method:

stopInterval(){
  clearInterval(this.intervalInstance);
}

Answer 2

To keep a function running at certain intervals, utilize the setInterval method.

The function will continue to execute until you explicitly call clearInterval. To stop the interval, create a method in your service and invoke it within the ngOnDestroy lifecycle hook of the AppComponent.

Within your constructor, initialize a variable like this:

constructor(){
     this.intervalInstance = this.startInterval();
}

Your service should have a function defined as follows:

startInterval() {
   setInterval(()=>{
      this.dataArray = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.dataArray];
},10000)

In the app component's ngOnDestroy method, call:

ngOnDestroy() {
  this.service.stopInterval()
}

In your service, define the following method:

stopInterval(){
  clearInterval(this.intervalInstance);
}

Answer 3

Answer №2

To achieve continuous execution every second, opt for the setInterval function instead of using setTimeout, which runs only once.

Answer 4

To achieve continuous execution every second, opt for the setInterval function instead of using setTimeout, which runs only once.

Answer 5

Answer №3

If you wish to continuously update your data every second, employing a reactive strategy can be effective.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/interval';

@Injectable()
export class SharedDataService {
  poll$: Observable<any>;

  constructor() {
    this.poll$.interval(1000).subscribe(() => {
      return this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }
  }

  public currentAndLastVehicles : string[] = [];
}

Answer 6

If you wish to continuously update your data every second, employing a reactive strategy can be effective.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/interval';

@Injectable()
export class SharedDataService {
  poll$: Observable<any>;

  constructor() {
    this.poll$.interval(1000).subscribe(() => {
      return this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }
  }

  public currentAndLastVehicles : string[] = [];
}

Answer 7

Answer №4

If you need a function to run every X seconds until it is canceled, you can utilize the setInterval method.

setInterval(() => {
      console.log("hello");
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }, 1000);
 }

Remember to save the value returned by setInterval so that you have the option to cancel it when necessary.

Answer 8

If you need a function to run every X seconds until it is canceled, you can utilize the setInterval method.

setInterval(() => {
      console.log("hello");
      this.currentAndLastVehicles = [(Math.floor(Math.random() * (1000000 - 9999999)) + 9999999).toString(),...this.currentAndLastVehicles];
    }, 1000);
 }

Remember to save the value returned by setInterval so that you have the option to cancel it when necessary.

Executing Timers in Angular 5 Service

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Can you explain Angular's "rule of unidirectional data flow" to me?

React Traffic Light Component: Colors Stuck After Timeout

How to Validate Ionic 2 Radio Button Selections with TypeScript

What is the best way to remove linear-gradient effects applied by a dark mode theme?

Importing TypeScript modules dynamically can be achieved without the need for Promises

Steps for importing a CommonJS module that exports as a callable into TypeScript

What is the TypeScript definition for the return type of a Reselect function in Redux?

TypeScript - creating a dynamic instance of a new class with a custom

When utilizing WPF WebBrowser with a local Angular 8 website, the window.external feature works flawlessly. However, complications arise when

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

The InMemoryCache feature of Apollo quietly discards data associated with fragments that are declared on the main

Visualization of pie charts in Angular2 using Google library

Exploring the behavior of control flow in Typescript

I encountered a SyntaxError while parsing JSON due to an absence of a number after a minus sign at position 1

Acquiring user information from Firebase using Angular 2

What is the best method for connecting a ref to a component that I am duplicating with React.cloneElement?

Typescript defines types for parameters used in callbacks for an event bus

Switching from JavaScript to TypeScript resulted in React context not being located in its respective file

"Troubleshooting: The Angular Check-All feature is unexpectedly selecting disabled checkboxes within the ngx data

When incorporating leaflet-routing-machine with Angular 7, Nominatim seems to be inaccessible