Можем ли мы остановить асинхронную функцию на некоторое время внутри?

Question

Я новичок в angular (и codding), и мне было интересно, можно ли начать добавлять значения через некоторое время (с setTimeout) в переменную после запуска в html, а затем остановить процесс, нажимая другую кнопку.Вот 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>

и вот что я пытаюсь:

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

если я понял вашу проблему, как насчет использования 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;
  }
}

Answer 2

Вам не нужно использовать 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;
    }
}