Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

Question

Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

I am experimenting with a scenario where I read the data, loop based on the duration. For example, starting with "Adam" first, play Adam for a 15-second timer, then move on to the next beginner "Andy" and play Andy for 15 seconds.

Once we reach group "intermediate," play "Fam" for 30s, then move to "Jamie" and play for 30s. Repeat for intermediate because the "play" count is 2. Once complete, move to the "expert" group.

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();
}

Thank you for sharing your idea in advance!

angular typescript rxjs rxjs6

Answer 1

Answer №1

Your code is close to being correct, but there are some nuances when using the timer function with different parameters:

timer(0, 15) will emit immediately upon subscription and then every 15ms indefinitely (since it never completes, concatMap will not move on to the next record).
timer(15) will emit only once after 15ms and then complete.

To implement this properly, you can use either of the following approaches:

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

Alternatively, you could utilize delay():

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

Answer 2

Your code is close to being correct, but there are some nuances when using the timer function with different parameters:

timer(0, 15) will emit immediately upon subscription and then every 15ms indefinitely (since it never completes, concatMap will not move on to the next record).
timer(15) will emit only once after 15ms and then complete.

To implement this properly, you can use either of the following approaches:

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

Alternatively, you could utilize delay():

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

Answer 3

Answer №2

To solve this issue, use the following concatenation map method: concatMap(item => timer(record.duration * 1000).pipe(ignoreElements(), startWith(record)))

Answer 4

To solve this issue, use the following concatenation map method: concatMap(item => timer(record.duration * 1000).pipe(ignoreElements(), startWith(record)))

Answer 5

Answer №3

Example in action:

import { from, timer, of } from "rxjs";
import { switchMap, repeat, delayWhen, scan, mapTo, concatMap } from "rxjs/operators";

interface Item {
  play: number;
  name: string;
  duration: number,
  group: string;
}

let data: Item[] = [{
    "play": 1,
    "name": "Alex",
    "duration": 15,
    "group": "novice"
}, {
    "play": 1,
    "group": "novice",
    "name": "Bob",
    "duration": 15
}, {
    "duration": 30,
    "play": 2,
    "name": "Cathy",
    "group": "intermediate"
}, {
    "name": "David",
    "group": "intermediate",
    "duration": 30,
    "play": 2
},
{
    "duration": 45,
    "play": 2,
    "name": "Eva",
    "group": "expert"
}, {
    "name": "Frank",
    "group": "expert",
    "duration": 45,
    "play": 2
}];

createSequence(data)
  .subscribe(result => {
    console.log(result);
  });

function createSequence(data: Item[]) {
// apply 'repeat' functionality
  const duplicatedData = data
    .reduce((acc, item) => [ ...acc, ...new Array(item.play).fill(item)], []);
// calculate interval for next item based on previous item
  const dataWithIntervalsAndRepeats = duplicatedData.map(
    (element, index) => ({ 
      element, 
      interval: duplicatedData[index-1] ? duplicatedData[index-1].duration : 0 
    }))

  return from(dataWithIntervalsAndRepeats).pipe(
    concatMap(({element, interval}) => timer(interval * 100)
      .pipe(mapTo(element))
    )
  );
}

Demonstration available (check browser console): https://stackblitz.com/edit/rxjs-4qu5r6?devtoolsheight=60

Answer 6

Example in action:

import { from, timer, of } from "rxjs";
import { switchMap, repeat, delayWhen, scan, mapTo, concatMap } from "rxjs/operators";

interface Item {
  play: number;
  name: string;
  duration: number,
  group: string;
}

let data: Item[] = [{
    "play": 1,
    "name": "Alex",
    "duration": 15,
    "group": "novice"
}, {
    "play": 1,
    "group": "novice",
    "name": "Bob",
    "duration": 15
}, {
    "duration": 30,
    "play": 2,
    "name": "Cathy",
    "group": "intermediate"
}, {
    "name": "David",
    "group": "intermediate",
    "duration": 30,
    "play": 2
},
{
    "duration": 45,
    "play": 2,
    "name": "Eva",
    "group": "expert"
}, {
    "name": "Frank",
    "group": "expert",
    "duration": 45,
    "play": 2
}];

createSequence(data)
  .subscribe(result => {
    console.log(result);
  });

function createSequence(data: Item[]) {
// apply 'repeat' functionality
  const duplicatedData = data
    .reduce((acc, item) => [ ...acc, ...new Array(item.play).fill(item)], []);
// calculate interval for next item based on previous item
  const dataWithIntervalsAndRepeats = duplicatedData.map(
    (element, index) => ({ 
      element, 
      interval: duplicatedData[index-1] ? duplicatedData[index-1].duration : 0 
    }))

  return from(dataWithIntervalsAndRepeats).pipe(
    concatMap(({element, interval}) => timer(interval * 100)
      .pipe(mapTo(element))
    )
  );
}

Demonstration available (check browser console): https://stackblitz.com/edit/rxjs-4qu5r6?devtoolsheight=60

Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

Answer №1

Answer №2

Answer №3

Similar questions

The sequence of output in TypeScript when using Gulp is similar to running tsc with a tsconfig

Sometimes the PDF does not display even though the iframe src attribute is updating in Angular 6

After updating my Angular version from 8 to 9, an error has been thrown stating "It is not possible to assign the value 'undefined' to the template variable 'limit'"

Angular: display many components with a click event

How to include a sub-route in Angular after adding parameters?

Binding two objects to a single event using Angular 2 syntax

Refreshing the page causes the Angular/Ionic Singleton instance to be destroyed

When utilizing a SSL certificate generated by Let's Encrypt in Node.js, the socket fails to establish a connection

Utilizing conditional types for type narrowing within a function's body: A comprehensive guide

Property does not exist when dispatching in React Redux within componentDidMount

Encountering a 403 error when attempting to upload files from Angular to a Micron

React modal not closing when clicking outside the modal in Bootstrap

Ways to display an icon with an underline effect upon hovering over text

Performing an insertion in TypeORM with a foreign key connection

Missing data: null or undefined?

Can the TypeScript Event class be customized and extended?

Finding the number enclosed within two characters - TypeScript

AngularJS 2 TypeScript structure

Determining Refresh Status in Angular Application

Challenges with Displaying Filtered Arrays in Angular