0

在 Stackblitz 中开发带有计时器的应用程序时，运行之间的间隔不会被清除。如在 Stackblitz 项目设置中，我指定在保存时重新加载。但是当应用程序重新加载时，旧的间隔仍然处于活动状态。

在 ngOnInit 方法中，我使用代码在间隔上设置了一个计时器： 在函数 tick() 中，我添加了日志记录以通过添加语句window.setInterval(this.tick, 1000); 来查看发生了什么。console.log('log information 1');然后我将我的 tick() 函数的内容更改为console.log('log information 2');然后我可以看到“日志信息 1”和“日志信息 2”消息每秒都出现在我的控制台中。

我尝试通过添加一个计时器变量来跟踪间隔，例如： this.appTimer = window.setInterval(this.tick, 1000);然后在创建新计时器之前清除旧计时器，然后window.clearInterval(this.appTimer);在新运行中执行任何其他操作之前。但是当然因为是新运行，所以变量 appTimer 还是空的。

有没有办法在重新加载 Stackblitz 时清除所有活动间隔？刷新浏览器可以解决问题，但这会启动和停止开发服务器，这似乎有点矫枉过正。

4

1 回答 1

0

尝试使用可观察间隔，并使用可破坏的可观察对象takeUntil()。

import {interval} from 'rxjs';

@Component({...})
export class ExampleComponent implements OnInit, OnDestroy {
   private destroyed = new Subject();
   ngOnDestroy() { this.destroyed.next(); }
   ngOnInit() {
      interval(1000).pipe(
         takeUntil(this.destroyed)
      ).subscribe(v => console.log(v));
   }
}
于 2019-09-17T19:09:39.533 回答