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

Question

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

}

Answer 1

利用 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));

(编辑:带有数组 block 的示例)Stackblitz:https://stackblitz.com/edit/rxjs-dkpg1h

编辑:更新了 Stackblitz 示例以绘制点。基本上你需要做的就是将tracingArray分割成 block (几个子数组)，然后每2秒绘制一次。