Question

setInterval（）正常工作并且计时器启动，但是当计数器值达到100时，clearInterval（）不会停止计时器。它会持续运行。任何帮助表示赞赏。

以下是我的组件代码 -

export class AppComponent {
  counter=0;
  progressInterval;

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

以下是我的组件HTML代码 -

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

这是显示进度条的截图 -

Screenshot

由于

Answer 1

或者您可以将间隔分配给变量。让我们这样说：

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

Answer 2

问题得到了修复。我忘了从“定时器”模块导入“clearInterval”。现在我更新如下，现在有效。

import { 
  setInterval,
  clearInterval
} from 'timers';

感谢所有人帮助我。

由于

Answer 3

使用ES6模块测试（尝试使用chrome 61以后）

<script type="module">
  class AppComponent {
    constructor() {
      this.counter = 0;
      this.progressInterval;
    }

    ngOnInit() {
      this.progressInterval = setInterval(() => {
        this.counter += 10;
        console.log('this.counter', this.counter);

        if(this.counter >= 100){
          clearInterval(this.progressInterval);
          console.log('cleaned and finished');
        }
      },200);
    }
  }

  const instance = new AppComponent();
  
  instance.ngOnInit();
</script>

使用ES6语法的代码完美无缺。似乎Angular5有另一种行为检查这个答案：

Angular 2 setinterval() keep running on other component

Answer 4

这是由于此变量范围仅限于当前函数。和interval函数有它自己的这个变量，所以它不能检测this.progressInterval变量。

尝试使用这种方式：

ngOnInit(){

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

Answer 5

在Angular中的Interval的任何实现中都需要考虑以下几点：

确保只实例化一次。在此示例中，如果要在清除计数器之前离开组件并返回，它将在原始实例继续运行的同时创建第二个实例。
使用OnDestroy离开页面或组件作用域时，可以安全清除间隔。完成后，您始终需要清除/处理间隔。

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

[..]

export class YourComponent implements OnInit, OnDestroy {

  progressInterval: any;

  ngOnInit() {
    [..]
  }

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

}

clearInterval（）在Angular 5 app中不起作用

5 个答案: