ForEach 内部的 Angular2 延迟

Question

我在 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>

显然我的代码没有按我想要的方式运行。

我该怎么做 "delay"？

Answer 1

看起来你所有的超时都安排在同一时刻。试试这个：

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)).

Answer 2

您可以通过普通的数组索引表示法使用它，而不是使用 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 3

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

你应该使用定时器：

import { timer } from 'rxjs';

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

ForEach 内部的 Angular2 延迟

Angular2 delay inside ForEach

delay

settimeout

typescript

angular-material

angular