Angular 可以开始按钮不能停止间隔

Question

我正在使用 Angular 并且我有这个代码：

App.component.ts

started: boolean = false;

…

startStop() {
    if (!this.started) {
      setInterval(()=> { this.test() }, 1000); // not started so start the interval   
      this.started = true;
    } else if (this.started) {
      this.started = false;  // Its started so stop it');
      clearInterval();
    }
  }


test() {
  // do stuff only via interval if started
}

然后我有一个按钮可以打开和关闭它

app.component.html

<button (click)=“startStop()”>Start / Stop</button>

即使将变量“started”更改为 false，间隔也会打开但不会关闭。

我该如何解决这个问题？

Answer 1

这不是 clearInterval 的工作方式。如果你有几个间隔怎么办？它会停止哪一个？

setInterval returns 您应该传递给 clearInterval

的 ID

startStop() {
    let intervalId
    if (!this.started) {
      intervalId = setInterval(()=> { this.test() }, 1000); // not started so start the interval   
      this.started = true;
    } else if (this.started) {
      this.started = false;  // Its started so stop it');
      clearInterval(intervalId);
    }
  }

Angular 可以开始按钮不能停止间隔

Angular can start button cannot stop the interval

angular

typescript

angular12

angular13