clearInterval() 在 Angular 5 应用程序中不起作用答案

【问题标题】：clearInterval() not working in Angular 5 appclearInterval() 在 Angular 5 应用程序中不起作用
【发布时间】：2019-02-14 23:36:35
【问题描述】：

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

谢谢

【问题讨论】：

你的代码是 100% 没问题的，它也清除超时没有问题。
您的代码对我来说运行良好。
您是否在课堂上的其他地方修改this.progressInterval 或this.counter？
@JoseAPL 不，我不是。谢谢
@Rahul 是 AppComponent 类的全部代码吗？

标签： javascript angular angular5 clearinterval

【解决方案1】：

问题已为我解决。我忘了从“定时器”模块导入“clearInterval”。现在我像下面这样更新，它现在可以工作了。

import { 
  setInterval,
  clearInterval
} from 'timers';

感谢大家在这方面帮助我。

谢谢

【讨论】：

这很奇怪。你在使用 Angular CLI 吗？根本不需要导入计时器。
@Emocuc 是的，它对我来说也很奇怪。是的，我正在使用 Angular CLI。即使我很困惑为什么我必须导入计时器模块。
尝试将您的软件包更新到最新版本。就在最近，我们获得了 Angular 5.2.2 和 Angular CLI 1.6.6。 ... 与默认的 Angular CLI 种子相比，其他依赖项也增加了

【解决方案2】：

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

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

【讨论】：

这与他所做的有什么不同，究竟是什么？
我把它作为一个选项，说'或者你可以' -> 我认为在许多情况下，用更多引用填充组件的空间并不是一个好主意 -> 他使用间隔作为这其中的一部分。范围，但很可能在初始生命周期结束后他没有访问它，因此它只是过度填充空间，const 只会将它保留在初始生命周期范围内......而且我认为语法更全面......
@tiagodws 范围！如果您不会在类的其他部分使用，那么将属性分配给类是没有用的。 this. progressInterval 是仅在此方法中使用的类范围，因此间隔的本地范围会更好
我正在将此计数器值设置为 ng-bootstrap 进度条。但进度条即使达到 100 也不会停止。有什么帮助吗？
@Rahul - 请更新您的问题并显示代码的外观。谢谢

【解决方案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

【讨论】：

【解决方案4】：

这是由于此变量范围仅限于当前函数。和区间函数有它自己的这个变量，所以它无法检测到 this.progressInterval 变量。

尝试使用这种方式：

ngOnInit(){

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

【讨论】：

【解决方案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); }
  }

}

【讨论】：