JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://npmcdn.com/@reactivex/[email protected]/dist/global/Rx.umd.js"></script>
<div>
  <button id='start'>Start</button>
</div>
<div id='timer'></div>

JavaScript

//Non-stopping source

//Dangerous remapping

//Waterfall of output.  After some seconds in you'll notice a lag in the output.
//This is due to memory leaks and displays the danger of this operator if you're not careful.


const source = Rx.Observable
	.fromEvent(document.getElementById('start'), 'click');

const example = source.mergeMap(v => Rx.Observable.interval(500).take(3), 3);

const subscribe = example
  .do(v => {
  	console.log(v);
  	var para = document.createElement("p");
    var node = document.createTextNode(v);
    para.appendChild(node);
    var element = document.getElementById("timer");
		element.appendChild(para);
  }).subscribe();