Unable to stop interval in Angular 5 application

Question

Unable to stop interval in Angular 5 application

My setInterval() function seems to be working fine as the timer starts, but I am encountering an issue with clearInterval(). It does not stop the timer when the counter value reaches 100 and continues running continuously. Any help or suggestions would be greatly appreciated.

Here is the code for my component -

export class AppComponent {
  counter=0;
  progressInterval;

  ngOnInit(){
    this.progressInterval=setInterval(() => {
      this.counter=this.counter + 10;
      if(this.counter >= 100){        
          clearInterval(this.progressInterval);
      }
    },200);
  }
}

Below is the HTML code for my component -

<p style="margin:20px;">
    <ngb-progressbar
      type="warning"
      [value]="counter"
      [striped]="true"
      [animated]="true"
    >{{counter}}</ngb-progressbar>
  </p>

This screenshot displays the progress bar in action:

Screenshot

Thank you!

javascript angular angular5 clearinterval

Answer 1

Answer №1

Resolved the issue by importing "clearInterval" from the "timers" module, which I had forgotten to do initially. Updated my code as shown below and now it is functioning correctly.

import { 
  setInterval,
  clearInterval
} from 'timers';

Appreciate everyone's assistance with this problem.

Thank you

Answer 2

Resolved the issue by importing "clearInterval" from the "timers" module, which I had forgotten to do initially. Updated my code as shown below and now it is functioning correctly.

import { 
  setInterval,
  clearInterval
} from 'timers';

Appreciate everyone's assistance with this problem.

Thank you

Answer 3

Answer №2

Another option is to store the interval in a variable. For example:

ngOnInit() {
    const interval = setInterval( () => {
      this.counter += 10;
      if ( this.counter >= 100 ){        
          clearInterval( interval );
      }
    }, 200);
  }

Answer 4

Another option is to store the interval in a variable. For example:

ngOnInit() {
    const interval = setInterval( () => {
      this.counter += 10;
      if ( this.counter >= 100 ){        
          clearInterval( interval );
      }
    }, 200);
  }

Answer 5

Answer №3

Experimented with ES6 modules in Chrome 61 and later versions.

<script type="module">
  class MyComponent {
    constructor() {
      this.counter = 0;
      this.progressInterval;
    }

    initialize() {
      this.progressInterval = setInterval(() => {
        this.counter += 10;
        console.log('this.counter', this.counter);

        if(this.counter >= 100){
          clearInterval(this.progressInterval);
          console.log('Cleaned up and finished');
        }
      },200);
    }
  }

  const element = new MyComponent();
   
  element.initialize();
</script>

Your code using ES6 syntax is functioning flawlessly. There may be a different outcome when using Angular5, see this response:

Angular 2 setinterval() keep running on other component

Answer 6

Experimented with ES6 modules in Chrome 61 and later versions.

<script type="module">
  class MyComponent {
    constructor() {
      this.counter = 0;
      this.progressInterval;
    }

    initialize() {
      this.progressInterval = setInterval(() => {
        this.counter += 10;
        console.log('this.counter', this.counter);

        if(this.counter >= 100){
          clearInterval(this.progressInterval);
          console.log('Cleaned up and finished');
        }
      },200);
    }
  }

  const element = new MyComponent();
   
  element.initialize();
</script>

Your code using ES6 syntax is functioning flawlessly. There may be a different outcome when using Angular5, see this response:

Angular 2 setinterval() keep running on other component

Answer 7

Answer №4

The reason for this limitation is that the variable scope is restricted to the current function only, and the interval function has its own 'this' variable which cannot access the 'this.progressInterval' variable.

You can try implementing it in the following way:

ngOnInit(){

    const initScope = this;
    this.progressInterval=setInterval(()=>{
      initScope.counter=initScope.counter+10;
      if(initScope.counter>=100){        
          clearInterval(initScope.progressInterval);
      }
    },200);
  }

Answer 8

The reason for this limitation is that the variable scope is restricted to the current function only, and the interval function has its own 'this' variable which cannot access the 'this.progressInterval' variable.

You can try implementing it in the following way:

ngOnInit(){

    const initScope = this;
    this.progressInterval=setInterval(()=>{
      initScope.counter=initScope.counter+10;
      if(initScope.counter>=100){        
          clearInterval(initScope.progressInterval);
      }
    },200);
  }

Answer 9

Answer №5

When implementing Interval in Angular, it's important to keep a few things in mind:

Ensure that you only instantiate Interval once. If you navigate away from the component and return before clearing the interval, a second instance may be created while the original continues running.
Always have a fail-safe method for clearing the interval when leaving the page or scope of the component using OnDestroy. Remember to clear or dispose of the interval when it is no longer needed.

import { Component, OnInit, OnDestroy } from '@angular/core';

[..]

export class YourComponent implements OnInit, OnDestroy {

  progressInterval: any;

  ngOnInit() {
    [..]
  }

  ngOnDestroy() {
    if (this.progressInterval) { clearInterval(this.progressInterval); }
  }

}

Answer 10

When implementing Interval in Angular, it's important to keep a few things in mind:

Ensure that you only instantiate Interval once. If you navigate away from the component and return before clearing the interval, a second instance may be created while the original continues running.
Always have a fail-safe method for clearing the interval when leaving the page or scope of the component using OnDestroy. Remember to clear or dispose of the interval when it is no longer needed.

import { Component, OnInit, OnDestroy } from '@angular/core';

[..]

export class YourComponent implements OnInit, OnDestroy {

  progressInterval: any;

  ngOnInit() {
    [..]
  }

  ngOnDestroy() {
    if (this.progressInterval) { clearInterval(this.progressInterval); }
  }

}

Unable to stop interval in Angular 5 application

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implement AngularJS to ensure that scripts are only loaded after the page has finished rendering

Having issues with Jquery and duplicating tables functionality not functioning as expected

Vue-based bot for telegram web application

Trouble with Map method not displaying data in Next.js

Stubbing out a module's function with Sinon

What is the best way to make an array with values from a checkbox list?

Injecting a useFactory provider in Angular is a common practice

What is the best way to determine if a child component's property has changed within a method?

Angular 8 allows for the utilization of Ul li elements to create an expandable and collapsible hierarchical

What is the best way to insert a JavaScript variable into a filter while using ng-repeat?

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I seem to be experiencing difficulty receiving the JavaScript alert on my controller page

Tabulator and its convenient scrollable column feature allows for easy navigation

Injecting a controller into an AngularJS module within an anonymous function

Dynamic routes in NextJS automatically append a .txt extension to the end of the URL

Generate fake data for all possible combinations using JSON faker

The 'filter' property is not found on the 'Observable<>' type

Prevent unnecessary requests for asset images in Angular 5

MongoDB and Node.js encounter unexpected outcomes due to undefined variables

How can I position two divs side by side within an Appbar?