Angular2 задержка внутри ForEach - PullRequest
Новая
       9

Angular2 задержка внутри ForEach

0 голосов
/ 06 марта 2019

У меня есть приложение в 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, чтобы показать степень вa mat-progress-barr

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

Очевидно, мой код работает не так, как я хочу.

Как я могу сделать эту «задержку»?

Ответы [ 3 ]

0 голосов
/ 07 марта 2019

Вместо использования цикла 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);
}
0 голосов
/ 07 марта 2019

Вы можете сделать то, что сказал @ t8ortotlover, но это все равно не гарантирует 3-секундную задержку. Это было бы близко, но не совсем.

Вы должны использовать таймер: 

import { timer } from 'rxjs';

const source = timer(3000);
const subscribe = source.subscribe(val => {
    // Do something every 3 seconds
});
0 голосов
/ 06 марта 2019

Похоже, все ваши тайм-ауты запланированы на одно и то же мгновение. Попробуйте это: 

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

...