如何在Angular中停止setInterval

时间:2020-04-17 08:09:30

标签: angular rxjs setinterval

我有一个对象数组,对于数组的第一棵树元素,应将isChecked属性设置为true。数组的索引为3后,我应该重定向到另一页,但是setInterval仍在运行

public sendApplication(): void {
    if (this.formService.isFormValid(this.formGroup)) {
        this.dialogProcessing
            = this.dialog.open(FoDialogBankVerificationComponent, {
            width: '500px',
            disableClose: true,
            data: this.checkBoxValues,
        });
        this.submit()
            .pipe(
                take(1))
            .subscribe(res => {
                    this.checkBoxValues.forEach((checkbox, index) => {
                        this.interval = interval(1000 * index).subscribe(() => {
                            checkbox.isChecked = true;
                            console.log(index);
                            if (res.id === 1700) {
                                if (index === this.checkBoxValues.length - 1) {
                                    this.status = res.id;
                                    this.dialogProcessing.close();
                                    this.interval.unsubscribe();
                                }
                            } else {
                                const random: number = Math.floor(1 + Math.random() * 4);
                                if (index === random) {
                                    this.dialogProcessing.close();
                                    this.interval.unsubscribe();
                                    this.navigationService.navigateToDeniedPage();
                                }
                            }
                        });
                    });
                },
                () => {
                    this.dialogProcessing.close();
                    this.notificationService.showGetErrorNotification();
                });
    }
}

2 个答案:

答案 0 :(得分:1)

使用可观察的方法进行操作。我为此在链接https://stackblitz.com/edit/angular-gq9zvk

中创建了一个演示倒计时

创建属性

  ispause = new Subject();
  timer: Observable<number>;
  timerObserver: PartialObserver<number>;

启动计时器

  this.timer.subscribe(this.timerObserver); 

创建计时器

this.timer = interval(1000)
      .pipe(
        takeUntil(this.ispause) // take until used to stop it
      );

    this.timerObserver = {

      next: (_: number) => {  
         //u cann call function here      
      }
    };

停止this.ispause.next();

答案 1 :(得分:0)

我建议使用clearInterval停止setinterval

请检查以下内容以进行实施

How to use clearInterval() in Angular 4