<h1>Observables Example #2</h1>
<p>
  We have created 2 subscriptions where first
  <ul>
    <li>transform event into sum of offsets</li>
    <li>filter for those which are bigger than 200</li>
    <li>debounce by 300ms ( => subscribe called no more than once 300ms)</li>
    <li>log sum into subscribe</li>
  </ul>
  and second which just logs all events as they come.
</p>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"></script>
const source = Rx.Observable.fromEvent(document.body, 'mousemove');

// original example
source.subscribe(
      value => console.log(`val => x: ${value.offsetX} & y: ${value.offsetY}`),
      error => console.log(error),
      () => console.log('completed')
    );

// log event where sum of offsets is bigger than 200 and debounce by 300ms
source
  .map(value => value.offsetX + value.offsetY)
  .filter(offsetSum => offsetSum > 200)
  .debounceTime(300)
  .subscribe(
      value => console.log(`Offset sum once 300 ms => ${value}`),
      error => console.log(error),
      () => console.log('completed')
    );
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.