JSFiddle - React, Tailwind, and code Playground

by mfp22

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.2/Rx.js"></script>
<button id="listen">Listen to [el1] or [el1,el2]</button>
<br><br>
<button id="el1">el1</button>
<button id="el2">el2</button>

<br>
<br>

<textarea id='events'></textarea>

CSS

textarea {
  min-width: 30em;
  min-height:10em;
}

JavaScript

const els = {};
els[1] = document.getElementById('el1');
els[2] = document.getElementById('el2');
const eventsText = document.getElementById('events');

const obj$ = {};

const listeningArray$ = Rx.Observable.fromEvent(document.getElementById('listen'), 'click')
  	.map(() => Math.floor(Math.random()*10) % 2 === 0 ? [1] : [1,2])
    .map((ar) => {
    	[1,2].forEach(n => {
      	if (ar.indexOf(n) !== -1) {
        	els[n].style.borderColor = 'red';
        } else {
        	els[n].style.borderColor = 'gray';
        }
      })
      return ar;
    });

Rx.Observable.combineLatest(
	Rx.Observable.interval(2000),
  listeningArray$
)
.switchMap(([x, ar]) => {
		const observables = [];
		ar.forEach(n => {
    	obj$[n] = obj$[n] || Rx.Observable.fromEvent(els[n], 'click')
        .map(()=>{
          eventsText.value += ` el${n}_${x}`;
        })
        .finally(() => {
          eventsText.value += ' FINALLY_' + n;
        });
      observables.push(obj$[n]);
    })
    
    return Rx.Observable.combineLatest(...observables);
})
.subscribe()