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>

这是我正在尝试的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

您无需使用Orange Blocks|5 Red Blocks|5 Yellow Blocks|10 Tan Blocks|11 Blue Blocks|12 Purple Blocks|24 Black Blocks|121 Green Blocks|59即可完成您想做的事情。使用active_clients= {} for item in client_list: if item[3] == 1: active_clients[item][1]=item[2]和async/await将为您带来理想的效果。

setInterval

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;
  }
}

我们可以在里面停一会儿来停止异步功能吗？

2 个答案: