我们可以在一段时间内停止异步功能吗？

Question

我是 Angular（和编码）的新手，我想知道一旦我在 html 中触发，是否可以在一段时间后（使用 setTimeout）开始向变量添加值，然后停止单击另一个按钮的过程。 这是html：

<div>
  <span>
    <button (click)="addingNumber(5000)">Start adding Number</button>
  </span>
  <span>
    <button (click)="stopAddingNumber()">Stop Adding Number</button>
  </span>
</div>
<div>{{actualNumber}}</div>

这是我正在尝试的 Ts：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-number-add',
  templateUrl: './number-add.component.html',
  styleUrls: ['./number-add.component.css']
})
export class NumberAdd implements OnInit {

  actualNumber = 0;
  countActive: boolean;

  constructor() { }

  ngOnInit() {
  }

  waitTime(awaitTime: number) {
    return new Promise(() => {
      setTimeout(() => {
        this.actualNumber += 1;
      }, awaitTime);
    });
  }

  async addingNumber(time: number) {
    this.countActive = true;
    while (this.countActive) {
      await this.waitTime(time);
    }
  }

  stopAddingNumber() {
    this.countActive = false;
  }
}

当我尝试这段代码时，它只会打印 1 并在此处“停止”。

Answer 1

你不需要使用async/await 来做你想做的事情。使用setInterval 和clearInterval 会给你想要的效果。

actualNumber = 0;
interval = null;

addingNumber(time: number) {
    if (this.interval === null) {
        this.interval = setInterval(() => this.actualNumber++, time);
    }
}

stopAddingNumber() {
    if (this.interval !== null) {
        clearInterval(this.interval);
        this.interval = null;
    }
}

Answer 2

如果我理解了您的问题，不如改用 setInterval 和 clearInterval。这是一个代码示例，我不确定它是否会正常运行。

export class NumberAdd implements OnInit {

  actualNumber = 0;
  countActive: boolean;
  interval = null;

  constructor() { }

  ngOnInit() {
  }

  addingNumber(time: number) {
    if (interval) {
        clearInterval(interval);
        interval = null;
    }

    interval = setInterval(() {
        this.actualNumber += 1;
    }, time);
  }

  stopAddingNumber() {
    if (interval) {
        clearInterval(interval);
    }

    interval = null;
  }
}