kiwi
kiwi

Reputation: 93

Angular Subcriber for BehaviorSubject fires multiple times

When calling the patchPreview method the subscriber fires multiple times. The latestAddress$ variable is a BehaviorSubject. I tried adding .pipe(...,take(1)), however this prevents the address from being updated. How can I reduce the number of subscriber calls?

protected patchPreview = (offer: Offer) => {
    
        this.geolocationService.latestAddress$
            .pipe(
                takeUntil(this.onDestroy$),
                filter(value => value !== null)
            ).subscribe((address) => {
                console.log('called more than once');
                ...
                this.offerPreview = { /*sets address */ };
            });

        this.cdr.markForCheck();
}

Upvotes: 2

Views: 535

Answers (3)

Edmunds Folkmanis
Edmunds Folkmanis

Reputation: 572

You should inspect observable latestAddress$ for multiple emissions. But it's absolutely normal for observable to emit multiple times.

Also with each function patchPreview call you make another subscription without completing the previous and every latestAddress$ emission will call subscriber as many times as function patchPreview has been run.

btw, changeDetector should markForCheck every time a value is emitted, not when the operator chain is set up and subscribed.

.subscribe((address) => {
            console.log('called more than once');
            ...
            this.offerPreview = { /*sets address */ };
            this.cdr.markForCheck();
        });

Upvotes: 2

Naren Murali
Naren Murali

Reputation: 56668

You can use debounceTime it will reduce the number of multiple emits.

protected patchPreview = (offer: Offer) => {
    
        this.geolocationService.latestAddress$
            .pipe(
                debounceTime(1000), // 1 second debounce time
                takeUntil(this.onDestroy$),
                filter(value => value !== null)
            ).subscribe((address) => {
                console.log('called more than once');
                ...
                this.offerPreview = { /*sets address */ };
            });

        this.cdr.markForCheck();
}

Upvotes: 0

kozko
kozko

Reputation: 31

The Observable emits multiple times so it's normal for your subscriber to be fired multiple times.

You could look into using throttleTime which allows you to throttle the Observable emission speed to the interval you set.

Upvotes: 0

Related Questions