时间戳

首页 > 解决方案 > Angular RxJS 根据数组对象中不同的持续时间创建计时器循环

angular - Angular RxJS 根据数组对象中不同的持续时间创建计时器循环

问题描述

我在这里尝试的场景是读取数据，根据持续时间循环，例如，先拿“亚当”，玩亚当 15 秒计时器，然后转到下一个初学者“安迪”，玩安迪 15 秒.

因为“播放”为 1，移动到下一组“中间”，播放“Fam” 30 秒，然后移动到“杰米”并播放 30 秒。一旦完成，循环中间，因为“播放”为 2……一旦完成，移至“专家”

let data = [{
    "play": 1,
    "name": "Adam",
    "duration": 15,
    "group": "beginner"
}, {
    "play": 1,
    "group": "beginner",
    "name": "Andy",
    "duration": 15
}, {
    "duration": 30,
    "play": 2,
    "name": "Fam",
    "group": "intermediate"
}, {
    "name": "Jamie",
    "group": "intermediate",
    "duration": 30,
    "play": 2
},
{
    "duration": 45,
    "play": 2,
    "name": "Fam",
    "group": "expert"
}, {
    "name": "Jamie",
    "group": "expert",
    "duration": 45,
    "play": 2
}];

destroy$: Subject<boolean> = new Subject<boolean>();
onStart() {
  from(data).pipe(
    takeUntil(this.destroy$),
    concatMap(record => timer(0, record.duration * 1000).pipe(
    map(i => data[i]))
  ))
  .subscribe(data => {
    this.currentItem = data;
  });
}

ngOnDestroy() {
  this.destroy$.next(true);
  this.destroy$.unsubscribe();
}

非常感谢您提前分享您的想法谢谢！

标签： angulartypescriptrxjsrxjs6

解决方案

你所拥有的几乎是正确的。当您使用timer两个参数时，它的含义与仅使用一个参数不同：

  • timer(0, 15)将在订阅时立即发出，然后15ms永远发出（它永远不会完成，concatMap永远不会订阅下一条记录......）。
  • timer(15)之后只会发出一次15ms然后完成。

因此，您应该使用例如以下内容：

concatMap(record => timer(record.duration * 1000).pipe(
  map(() => record),
),

或者你可以使用delay().

concatMap(record => of(record).pipe(
  delay(record.duration * 1000),
),

推荐阅读