RxJS emits an array of strings with a one second interval between each emission

Question

RxJS emits an array of strings with a one second interval between each emission

Currently, my code is set up to transform an Observable<string[]> into an Observable<string>, emitting the values one second apart from each other. It's like a message ticker on a website.

Here's how it works at the moment:

    const arrayOfStrings$ = of([
        'Warming things up',
        'Getting things ready',
        'Welcome'
    ]);

    this.messages$ = arrayOfStrings$.pipe(
        switchMap((messages) => from(messages).pipe(
            concatMap((innerMessage) => of(innerMessage).pipe(delay(1000))),
        )),
        tap((message) => {
            console.log(`Message: ${message}`);
        })
    );

I'm wondering if there's a more concise way to achieve the same outcome with less code. The nesting of switchMap() and concatMap() is a bit cumbersome for me.

Any suggestions or advice would be greatly appreciated.

Edit: The example provided here is a simplified version of what I'm currently working on in my project. I'm looking for a simpler method to transition from an Observable<string[]> to an Observable while adding a one-second delay between emissions.

javascript angular typescript rxjs

Answer 1

Answer №1

To ensure each emission is delivered sequentially with a specified time interval, you can utilize the concatMap() and delay() operators.

const stringArray = [
  'Preparing for launch',
  'Initiating countdown',
  'Blast off!'
];

(from(stringArray)
  .pipe(
    concatMap(message => 
      of(message).pipe(delay(2_000))
    ),
  )
  .subscribe()
);

Answer 2

To ensure each emission is delivered sequentially with a specified time interval, you can utilize the concatMap() and delay() operators.

const stringArray = [
  'Preparing for launch',
  'Initiating countdown',
  'Blast off!'
];

(from(stringArray)
  .pipe(
    concatMap(message => 
      of(message).pipe(delay(2_000))
    ),
  )
  .subscribe()
);

Answer 3

Answer №2

When you want to combine the items 'one', 'two', and 'three' with a time interval of 1000 milliseconds between each item, you can use the zipWith operator along with the interval function. The result will be logged to the console.

If you prefer to start immediately instead, you can replace the interval function with timer(0, 1000).

Answer 4

When you want to combine the items 'one', 'two', and 'three' with a time interval of 1000 milliseconds between each item, you can use the zipWith operator along with the interval function. The result will be logged to the console.

If you prefer to start immediately instead, you can replace the interval function with timer(0, 1000).

Answer 5

Answer №3

If I were to implement this, my approach would involve the use of the provided code snippet:

const stringsArray$ = of([
  'Preparing for action',
  'Setting things in motion',
  'Greetings'
]);

stringsArray$.pipe(
  mergeMap((str) => str),
  zip(timer(1000, 1000)),
  map(([str]) => str),
  tap(msg => {
    console.log(`Displaying message: ${msg}`);
  })
);

Answer 6

If I were to implement this, my approach would involve the use of the provided code snippet:

const stringsArray$ = of([
  'Preparing for action',
  'Setting things in motion',
  'Greetings'
]);

stringsArray$.pipe(
  mergeMap((str) => str),
  zip(timer(1000, 1000)),
  map(([str]) => str),
  tap(msg => {
    console.log(`Displaying message: ${msg}`);
  })
);

RxJS emits an array of strings with a one second interval between each emission

Answer №1

Answer №2

Answer №3

Similar questions

Comparing a number to the sum of numbers in JavaScript using VUE

`MongoDb aggregation performance degradation with numerous collections (join)`

The Heroku system encountered an issue: ENOENT - file or directory not found, trying to access '.env'

Child_process module spawn method in Node.js

Cannot access Injectable service in Angular2

The UPDATE query failed to make any changes to the data stored in the MySQL

Enhance row visibility by clicking a button in an ajax table

How can you utilize Angular Signals in combination with HostBinding to dynamically update styles?

Displaying a specific division solely on mobile devices with jQuery

Is it possible for a nodejs server to handle both grpc and express servers simultaneously, or do they need to be separate servers?

Execute the Angular filter again when there is a change in the scope

How to pass a data property as a function argument in Vue.js

Error encountered in Node.js: The listener must be a function

Incorporate functionality into a button using jQuery

Combining information from two different sources to create a more comprehensive dataset

Can a single shield protect every part of an Angular application?

Dynamic Images with Next.js

Achieving Jest integration with Angular 9 in a Storybook setup

karma: Error: Unable to access the 'prototype' property of an undefined object

Modifying the row background in a DataTables drawCallback