角度替代 setInterval()答案

【问题标题】：Angular alternative to setInterval()角度替代 setInterval()
【发布时间】：2020-03-14 05:24:52
【问题描述】：

我使用以下方法在一定时间后更改属性：

switchColors() {
    this.interval = setInterval( () => {
      some code;
    }, 700);
}

它有效，但有时这种方法在闪烁、跳跃等方面似乎不可靠。

还有其他更好的方法来实现类似的行为吗？

【问题讨论】：

interval 确实是setInterval 的替代品，够了吗？听起来您可能仍然会遇到闪烁问题。
@JasonAwbrey 有点像。如果我离开标签一段时间然后回来，它有时似乎被加速 - 有没有办法防止这种情况？
就这个问题而言，我同意 RxJS interval 是 setInterval 的充分替代品。我认为深入研究您遇到的其他问题，它们会更适合带有更多代码示例的新问题。如果您打开它，请随时在评论中联系我。

标签： angular typescript

【解决方案1】：

您可以使用来自 rxjs 的 Timer Observable，取自 this answer：

import { timer } from 'rxjs';

oberserableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="oberserableTimer()">Start Observable timer</p> {{subscribeTimer}}

【讨论】：

【解决方案2】：

您可以使用interval。

import {interval} from 'rxjs';

switchColors() {
    this.intervalSubscription = interval(700).subscribe(() => {
      some code;
    });
}

请注意，我将赋值中的字段名称从interval 更改为intervalSubscription，因此它不会与导入interval 混淆（没有命名冲突，它只是为了便于阅读）。

【讨论】：

谢谢，但如果我离开选项卡一会儿再回来，它有时似乎会加速 - 有没有办法防止这种情况发生？
在您离开页面时清除间隔，使用ngOnDestroy 或类似方法，然后重新声明返回该页面的间隔，这在过去遇到类似问题时对我有帮助。 @蒂姆