Question

我在angular2中有一个应用程序，必须在其中重现事件的历史记录。

因此，当我按下“播放”按钮时，它必须从第一个事件开始，待在那儿3秒钟，然后转到下一个事件，再呆在那儿3秒钟，再到下一个，依此类推。

事件列表是动态的。

问题在于，使用简单的setTimeOut不能正常工作，我想知道是否还有另一种方法可以解决我所需要的东西。

我尝试过：

play() {
  if (this.history !== undefined) {
    this.playMode = true;
    const allEvents = this.history;
    const historyLength = allEvents.length;
    const progressInterval = 100 / historyLength;
    allEvents.forEach(e => {
      console.log(e);
      setTimeout(t => {
        this.progress += progressInterval;
      }, 3000);
    });
  }
}

我需要this.progress变量来显示mat-progress-barr

中的进度

<mat-progress-bar *ngIf="playMode" strokeWidth="0.5" mode="determinate" [value]="progress" color="accent"></mat-progress-bar>

很明显，我的代码无法正常运行。

我该如何进行“延迟”？

Answer 1

您可以通过正常的数组索引符号来使用它，而不是使用forEach循环。这是一个例子

play() {
  if (this.history !== undefined) {
    this.playMode = true;
    const allEvents = this.history;
    const historyLength = allEvents.length;
    const progressInterval = 100 / historyLength;
    /*allEvents.forEach(e => {
      console.log(e);
      setTimeout(t => {
        this.progress += progressInterval;
      }, 3000);
    });*/

    this.incrementProgress(allEvents, 0, progressInterval);
  }
}

incrementProgress(allEvents: any[], index: number, interval: number): void {
  if (allEvents.length <= 0 || index < 0 || index >= allEvents.length) {
    return;
  }

  this.progress += interval;
  setTimout(() => this.incrementProgress(allEvents, index + 1, interval), 3000);
}

Answer 2

您可以执行@ t8ortotlover所说的，但仍不能保证3秒的延迟。会很接近，但不太完全。

您应该使用计时器：

{

"Session": "{{content.Envelope.Body.LogInResponse.SessionID}}"

}

Answer 3

您的所有超时似乎都安排在同一时刻。试试看：

play() {
  if (!this.history) {
    return;
  }

  const allEvents = this.history;
  const historyLength = allEvents.length;
  const progressInterval = 100 / historyLength;
  this.playMode = true;

  allEvents.forEach((event, index) => {
    setTimeout(() => {
      console.log(event);
      this.progress += progressInterval;
    }, 3000 * index);
  });
}

请注意，我们现在正在使用forEach提供的索引来将超时偏移3秒。第一个将立即(3000 * 0 = 0)发射。如果不需要，可以将其简单地添加到索引setTimeout(() => {...}, 3000 * (index + 1))中。

ForEach内部的Angular2延迟

3 个答案: