RxJS - Disposable

Fiddle exploring how to create a simple interval observable, with 2 subscriptions. After 5 seconds, the second subscription is disposed of.

by brady houseknecht

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<div id="subscription1"></div>
<div id="subscription2"></div>

CSS

body {
  margin-top: 10%;
  font-family: "Courier New";
  font-size: 2em;
  font-weight: 500;
  text-align: center;
  background-color: #0a001f;
  color: lime;
}

JavaScript

(function(undefined) {
  "use strict";

  this.metadata = {
    fiddleHeader: 'Rx - fiddle-0003-Disposable',
    urls: {
      github: 'https://github.com/bradyhouse/house/tree/master/fiddles/rxjs/fiddle-0003-Disposable',
      data: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/297733/data.json"
    },
    consoleTag: 'H O U S E ~ f i d d l e s'
  };


  let counter = Rx.Observable.interval(1000);


  let subscription1 = counter.subscribe(function(i) {
    d3.select("div#subscription1")
      .text('Subscription 1: ' + i);
  });

  let subscription2 = counter.subscribe(function(i) {
    d3.select("div#subscription2")
      .text('Subscription 2:  ' + i);
  });


  setTimeout(function() {
    d3.select("div#subscription2")
      .text('Subscription 2: Stopped!');
    subscription2.dispose();
  }, 5000);


  console.log("%c" + metadata.consoleTag, 'font-style: italic; font-size: 20px;');
  console.log("%c" + metadata.urls.github, "color: blue; font-style: italic; text-decoration: underline; background-color: #FFFF00;");
  console.group();

}.call(this));