代码之家 › 专栏 › 技术社区 › Sergio Mendez

ForEach内部角度2延迟

delay settimeout angular-material typescript angular

Sergio Mendez · 技术社区 · 5 年前

我在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);
    });
  }
}

mat-progress-barr

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

显然,我的代码没有按我所希望的那样工作。

1 回复 | 直到 5 年前

Pankaj Prakash 5 年前

您可以通过普通数组索引表示法来使用forEach循环,而不是使用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);
}

Roberto ZvjerkoviÄ sabithpocker 5 年前

你可以照@t8ortotlover说的做,但仍然不能保证3秒的延迟。很接近,但还不完全。

您应该使用计时器:

import { timer } from 'rxjs';

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

-1

Tom Faltesek 5 年前

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

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