<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.