plastikaweb
12/6/2016 - 10:20 AM

JS Bin RxJS - adding conditional logic with Filter // source https://jsbin.com/jewezex

JS Bin

RxJS - adding conditional logic with Filter

// source https://jsbin.com/jewezex

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="RxJS - adding conditional logic with Filter">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="half">Half</button>
  <button id="quarter">Quarter</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
  <hr/>
  <input id="input" type="text">
<script id="jsbin-javascript">
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');
var halfB = document.querySelector('#half');
var quarterB = document.querySelector('#quarter');
var inputF = document.querySelector('#input');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');
var half$ = Rx.Observable.fromEvent(halfB, 'click');
var quarter$ = Rx.Observable.fromEvent(quarterB, 'click');
var input$ = Rx.Observable.fromEvent(inputF, 'input').map(function (event) {
  return event.target.value;
});

var data = { count: 5 };
var inc = function inc(acc) {
  return { count: acc.count + 1 };
};
var reset = function reset(acc) {
  return data;
};

var starters$ = Rx.Observable.merge(start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250));
var intervalActions$ = function intervalActions$(time) {
  return Rx.Observable.merge(Rx.Observable.interval(time).takeUntil(stop$).mapTo(inc), reset$.mapTo(reset));
};

var timer$ = starters$.switchMap(intervalActions$).startWith(data).scan(function (acc, curr) {
  return curr(acc);
});

input$.subscribe(function (x) {
  return console.log(x);
});

Rx.Observable.combineLatest(timer$, input$, function (timer, input) {
  return { count: timer.count, text: input };
}).filter(function (data) {
  return data.count === parseInt(data.text);
}).subscribe(function (x) {
  return console.log(x);
});
</script>



<script id="jsbin-source-javascript" type="text/javascript">const startB = document.querySelector('#start');
const stopB = document.querySelector('#stop');
const resetB = document.querySelector('#reset');
const halfB = document.querySelector('#half');
const quarterB = document.querySelector('#quarter');
const inputF = document.querySelector('#input');

const start$ = Rx.Observable.fromEvent(startB, 'click');
const stop$ = Rx.Observable.fromEvent(stopB, 'click');
const reset$ = Rx.Observable.fromEvent(resetB, 'click');
const half$ = Rx.Observable.fromEvent(halfB, 'click');
const quarter$ = Rx.Observable.fromEvent(quarterB, 'click');
const input$ = Rx.Observable.fromEvent(inputF, 'input')
  .map(event => event.target.value);

const data = { count: 5 };
const inc = (acc) => ({count: acc.count + 1});
const reset = (acc) => (data);

const starters$ = Rx.Observable.merge(
    start$.mapTo(1000), 
    half$.mapTo(500),
    quarter$.mapTo(250)
  );
const intervalActions$ = (time) => Rx.Observable.merge(
      Rx.Observable.interval(time)
        .takeUntil(stop$).mapTo(inc), 
      reset$.mapTo(reset)
    );

const timer$ = starters$
  .switchMap(intervalActions$)
  .startWith(data)
  .scan((acc, curr) => curr(acc));

input$
  .subscribe((x) => console.log(x));

Rx.Observable.combineLatest(
    timer$, 
    input$,
    (timer, input) => ({count: timer.count, text: input})
  )
  .filter((data) => data.count === parseInt(data.text))
  .subscribe((x) => console.log(x));
</script></body>
</html>
jsbin.jewezex.js
content_copyfile_download
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');
var halfB = document.querySelector('#half');
var quarterB = document.querySelector('#quarter');
var inputF = document.querySelector('#input');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');
var half$ = Rx.Observable.fromEvent(halfB, 'click');
var quarter$ = Rx.Observable.fromEvent(quarterB, 'click');
var input$ = Rx.Observable.fromEvent(inputF, 'input').map(function (event) {
  return event.target.value;
});

var data = { count: 5 };
var inc = function inc(acc) {
  return { count: acc.count + 1 };
};
var reset = function reset(acc) {
  return data;
};

var starters$ = Rx.Observable.merge(start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250));
var intervalActions$ = function intervalActions$(time) {
  return Rx.Observable.merge(Rx.Observable.interval(time).takeUntil(stop$).mapTo(inc), reset$.mapTo(reset));
};

var timer$ = starters$.switchMap(intervalActions$).startWith(data).scan(function (acc, curr) {
  return curr(acc);
});

input$.subscribe(function (x) {
  return console.log(x);
});

Rx.Observable.combineLatest(timer$, input$, function (timer, input) {
  return { count: timer.count, text: input };
}).filter(function (data) {
  return data.count === parseInt(data.text);
}).subscribe(function (x) {
  return console.log(x);
});