rxjs filters on/of example with debounce

http://stackoverflow.com/posts/40397345

by crunchie84

HTML

<div>
  <h1>filters</h1>
  <ul>
    <li>
      <label>
        <input type="checkbox" name="option_1" data-role="filter">option 1</label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="option_2" data-role="filter">option 2</label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="option_3" data-role="filter">option 3</label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="option_4" data-role="filter">option 4</label>
    </li>
  </ul>


  <h1>output</h1>
  <textarea id="output" rows=10 cols=150></textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.1/rx.all.compat.min.js"></script>

JavaScript

const sources = document.querySelectorAll('input[type=checkbox]');
const clicksStream = Rx.Observable.fromEvent(sources, 'click')
  .map(evt => ({
    name: evt.target.name,
    enabled: evt.target.checked
  }));

const filterStatesStream = clicksStream.scan((acc, curr) => {
    acc[curr.name] = curr.enabled;
    return acc
  }, {})
  .debounce(5 * 1000)

filterStatesStream.subscribe(currentFilterState => document.getElementById('output').value = JSON.stringify(currentFilterState));