No Execution When Subscribing to Observable

Question

No Execution When Subscribing to Observable

I am attempting to showcase messages from a list for a duration of 1 second each. I cannot utilize the interval(1000) method because I need to have the ability to clear a message as soon as a condition is met and then display the subsequent one for 1 second.

My current progress includes:

nextMessage() : Observable<any>{
    this.currentMessage.next(this.messages[this.messagePointer++]);
    return this.currentMessages;
}

subscribeMessage() : void{
    this.currentMessage.pipe(switchMap(_=timer(1000).pipe(map(x=>this.nextMessage())))).subscribe(x=>console.log(x));
}

As it stands, this does not produce any results. My idea was that every second, the nextMessage function would update the currentMessage Observable, and if it was changed externally in between, the Timer would be reset. The subscribe method currently does not output anything, but when I try this instead:

this.currentMessage.pipe(tap(x=>console.log(x)),switchMap(_=timer(1000).pipe(map(x=>this.nextMessage())))).subscribe(x=>console.log(x));

I observe data values being displayed at 1-second intervals with the tap function working. Why does tap work but not the subscribe function?

EDIT

For a demonstration, you can view a StackBlitz Demo here

typescript rxjs observable

Answer 1

Answer №1

The issue at hand is the behavior of switchMap: it ends the observable prematurely, preventing the inner observable from emitting.

Here's a breakdown of what's happening:

currentMessage emits a message
tap logs that message
switchMap initiates a 1000ms timer
Once the timer finishes, nextMessage() gets called
nextMessage appends a value to currentMessage
Right before advancing to the next step in nextMessage, currentMessage emits another message (same as step 1)
tap logs this additional message (same as step 2)
switchMap terminates the previous observable and sets a new 1000ms timer
We circle back to nextMessage(), generating an observable that goes unacknowledged due to termination in the prior step
This cycle repeats starting from step 4

A simple solution would be replacing switchMap with mergeMap, but remember to insert take(1) on the inner observable to ensure only one value is emitted:

currentMessage
  .pipe(
    tap(x => console.log('Tap:' + x)),
    mergeMap(_ => timer(1000).pipe(
      map(x => nextMessage()),
      take(1)
    ))
  )
  .subscribe(x => console.log(x));

Although initially intricate, transitioning to a more reactive approach could streamline the process.

If using interval(1000) isn't viable due to reset conditions, consider employing a Subject for effective management of these conditions:

const messageResets = new Subject();

const messages: string[] = ['Message 1', 'Message 2', 'Message 3'];
let messagePointer: number = 0;

console.clear();

messageResets.pipe(
  startWith(null),
  switchMap(() => timer(0, 1000).pipe(
    map(() => messages[messagePointer++ % messages.length])
  ))
).subscribe(x => console.log(x));

Note: timer(0, 1000) operates similarly to interval(1000).

I typically reserve Subjects for handling external actions within the stream, like clearing the current message under uncertain conditions.

Relying on Subjects for managing internal states can become cumbersome over time.

Answer 2

The issue at hand is the behavior of switchMap: it ends the observable prematurely, preventing the inner observable from emitting.

Here's a breakdown of what's happening:

currentMessage emits a message
tap logs that message
switchMap initiates a 1000ms timer
Once the timer finishes, nextMessage() gets called
nextMessage appends a value to currentMessage
Right before advancing to the next step in nextMessage, currentMessage emits another message (same as step 1)
tap logs this additional message (same as step 2)
switchMap terminates the previous observable and sets a new 1000ms timer
We circle back to nextMessage(), generating an observable that goes unacknowledged due to termination in the prior step
This cycle repeats starting from step 4

A simple solution would be replacing switchMap with mergeMap, but remember to insert take(1) on the inner observable to ensure only one value is emitted:

currentMessage
  .pipe(
    tap(x => console.log('Tap:' + x)),
    mergeMap(_ => timer(1000).pipe(
      map(x => nextMessage()),
      take(1)
    ))
  )
  .subscribe(x => console.log(x));

Although initially intricate, transitioning to a more reactive approach could streamline the process.

If using interval(1000) isn't viable due to reset conditions, consider employing a Subject for effective management of these conditions:

const messageResets = new Subject();

const messages: string[] = ['Message 1', 'Message 2', 'Message 3'];
let messagePointer: number = 0;

console.clear();

messageResets.pipe(
  startWith(null),
  switchMap(() => timer(0, 1000).pipe(
    map(() => messages[messagePointer++ % messages.length])
  ))
).subscribe(x => console.log(x));

Note: timer(0, 1000) operates similarly to interval(1000).

I typically reserve Subjects for handling external actions within the stream, like clearing the current message under uncertain conditions.

Relying on Subjects for managing internal states can become cumbersome over time.

No Execution When Subscribing to Observable

Answer №1

Similar questions

Tips for waiting for and resolving real data within a loop

Passing `any` or `any[]` as a function parameter in Types

Bidirectional data binding in model-driven forms

What is the best way to dynamically generate and update the content of a select input in an Angular form using reactive programming techniques?

Utilize JSX attributes across various HTML elements

Discover and allocate personalized entity

Managing Observable<Person[]> in ng-bootstrap typeahead instead of Observable<string[]>: a complete guide

Detecting and clearing custom visual filters in Power BI

Is there a way to specifically choose the initial element using Angular? "Backend powered by Django"

How can HTML templates be effectively compiled for production purposes?

The error 'TypeError: instances.map is not a function in Angular Loopback' is indicating

What is the best way to recycle a single modal in Ionic?

The data type 'AbstractControl | null' cannot be assigned to type 'FormGroup'

In what way can I ensure that both parameters of a function match a particular Union type?

TypeScript integration with T4MVC

Creating a Universal Resolver in Angular (2+) - A Step-by-Step Guide

Error in Directive: NgControl Provider Not Found

The abundance of options in WebStorm's code completion for Node can be overwhelming

Exploring ways to customize or replace the extended CurrencyPipe type in Angular

What is the best way to combine two arrays by sorting them according to their respective years?