javascript - 每X秒和每个X元素循环的 typescript /Angular 延迟延续

在我的angular / typescript应用程序中，我有一个方法可以接收值数组

this.drawTracing(this.tracingArray);

在此实现的内部，我想遍历数组，并且数组中的每个X元素都希望在继续到数组的下一个元素之前延迟X秒。因此，例如，对于每5条记录，将循环继续延迟2秒。如何才能做到这一点？

private drawTracing(tracingArray: Tracing[]) {

    for (let i=0; i < length; i++) {
         this.creatTracing(tracingArray[i]);
    }

}

最佳答案

使用rxjs的力量。

import { of, from } from 'rxjs';
import { delay, concatMap, mergeMap } from 'rxjs/operators';

const source = of(tracingArray).pipe(
  mergeMap((x: [Tracing]) => from(x)),
  concatMap(x => of(x).pipe(delay(2000)))
);

source.subscribe(x => console.log(x));

（编辑：带有数组块的样本）Stackblitz：https://stackblitz.com/edit/rxjs-dkpg1h

编辑：更新了Stackblitz示例以绘制点。基本上，您需要做的就是将tracingArray拆分为多个块（几个子数组），然后每2秒绘制一次。