ForEach 内的 Angular2 延迟答案

【问题标题】：Angular2 delay inside ForEachForEach 内的 Angular2 延迟
【发布时间】：2019-03-06 15:46:04
【问题描述】：

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

所以，当我按下 PLAY 按钮时，它必须从第一个事件开始，在那里停留 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>

显然我的代码不能按我的意愿运行。

我怎样才能做到“延迟”？

【问题讨论】：

标签： angular typescript angular-material settimeout delay

【解决方案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);
}

【讨论】：

【解决方案2】：

您可以按照@t8ortotlover 所说的做，但仍不能保证 3 秒延迟。它会很接近，但并不完全。

你应该使用计时器：

import { timer } from 'rxjs';

const source = timer(3000);
const subscribe = source.subscribe(val => {
    // Do something every 3 seconds
});

【讨论】：

【解决方案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)) 中添加一个。

【讨论】：