javascript - setInterval 函数也在 Angular 6 的其他组件中运行

Question

我是 Angular(6) 的新手。我setInterval在组件中使用函数。它正在工作，但是当我导航到另一条路线时，setInterval继续执行。请帮我找出原因。

//Calling it in ngOnit()
autosavedraftsolution() {
      setInterval(() => {
        console.log(this.draftSolutionForm);
        if (this.solutionTitleValid) {
          this.savedraftsolution();
        }
      }, this.autoSaveInterval);
    }

//savedraftsolution()
  savedraftsolution() {
    console.log("saving..");

    this.connectService.saveDraftSolution({
      Title: this.draftSolutionForm.get('Title').value,
      Product: this.draftSolutionForm.get('Product').value
    } as Draftsolution).subscribe(draftsol => {
      console.log("saved");

    });
  }

它不断在控制台中向我显示“正在保存..”和“已保存”消息。

Answer 1

当您的组件卸载时，您需要调用clearInterval以停止它：

this.intervalId = setInterval(...);

当您的组件正在卸载时：

ngOnDestroy() {
  clearInterval(this.intervalId);
}

Answer 2

多米尼克是对的。您必须清除组件销毁的时间间隔。你可以做这样的事情

ngOnInit(){
    this.saveInterval = setInterval(() => {}, 1000)
}

ngOnDestroy(){
    clearInterval(this.saveInterval)
}

确保您的组件实现了 OnInit 和 OnDestroy。