Remove all subscribers from the Observable

Question

Remove all subscribers from the Observable

I'm relatively new to using Observables and Typescript, so bear with me if this question sounds like a beginner one. I am trying to create a simple timer but I want the ability to unsubscribe all subscribers from within the timer itself.

Here is what my current code looks like:

import { Observable } from "rxjs/Rx";

export class Timer {

    private interval: number;
    private ticker: Observable<any>;

    constructor() {
        this.interval = 1000; // Miliseconds
        this.ticker = Observable.interval(this.interval).timeInterval();
    }

    complete() {
        // Unsubscribe all listeners here
    }
}

Any ideas on how I can achieve unsubscribing all listeners from the complete method?

javascript typescript rxjs

Answer 1

Answer №1

If you find yourself without the Subscription objects of observers, it's impossible to directly unsubscribe them.

However, an alternative approach is available by utilizing the takeUntil operator to finish the source Observable and consequently dispose of the chain along with unsubscribing all observers.

constructor() {
  this.end = new Subject();

  this.ticker = Observable.interval(this.interval)
    .takeUntil(this.end)
    .timeInterval();
}

...

complete() {
  this.end.next();
}

Answer 2

If you find yourself without the Subscription objects of observers, it's impossible to directly unsubscribe them.

However, an alternative approach is available by utilizing the takeUntil operator to finish the source Observable and consequently dispose of the chain along with unsubscribing all observers.

constructor() {
  this.end = new Subject();

  this.ticker = Observable.interval(this.interval)
    .takeUntil(this.end)
    .timeInterval();
}

...

complete() {
  this.end.next();
}

Remove all subscribers from the Observable

Answer №1

Similar questions

Is there a way in React to specify which properties to pass (and when to pass them) to child components based on the properties of the parent component?

Guide to forwarding a visitor from an outdated URL to a fresh one, complete with slug using Next.js redirect 301

The directive attribute in AngularJS fails to connect to the directive scope

Here is an example of how to use a script tag to check the value of a select tag in HTML:

Unable to dynamically display an HTML5 video using JavaScript

Is there a way for the React select component to adjust its width automatically based on the label size?

React has successfully installed react router, but unfortunately, I am encountering difficulty in getting the page

creating a loop to handle AJAX requests for JSON data

Is there a way to call class methods from external code?

How can I create a rectangular border around text using the HTML5 canvas?

Angular 4 scatter chart with multiple data points using Google charts

Swap the image source with a different image attribute when making the website responsive

Error message: "Error encountered while building Next.js - ReferenceError: 'describe' is not defined"

Is it possible to use Vuejs v-model for a complete form instead of individual inputs?

Tips for resolving type checking errors in TypeScript and React

Creating a variable name dynamically using Typescript

Leveraging a specific section of an HTML5 CSS3 Bootstrap template in a separate template

JavaScript maintaining records and connections between multiple asynchronous events

Using AJAX and FormData to Attach a List upon Submission

Verifying the eligibility of a value for a union type