Skip to content

Instantly share code, notes, and snippets.

@helzgate helzgate/rxjs1.html
Last active Jan 20, 2017

Embed
What would you like to do?
rxjs jsbin file for testing combineLatest vs zip vs withLatestFrom
<button style="margin-top:80px" id="myClick">Click me</button>
let num = 0;
const buttn = document.getElementById("myClick");
const clickme = Rx.Observable.fromEvent(buttn, 'click')
.map(event => 'click ' + ++num); // map lets you change the type to anything or alter the input in some way
var x = Rx.Observable.interval(1000).take(4).map(g => g +1);
// ReplaySubject based --> you'll only get a value if both emit something
// x.combineLatest(clickme, (some, other) => {
// console.log('Interval: ' + some);
// console.log(other);
// })
// ReplaySubject based --> to one ratio ...
x.zip(clickme, (some, other) => {
console.log('Interval: ' + some);
console.log(other);
return some; // comment this line to see how below subcription outputs nothing until complete
})
// BehaviorSubject based --> only get something if both emit
// x.withLatestFrom(clickme, (some, other) => {
// console.log('Interval: ' + some);
// console.log(other);
// })
// do is great for logging or doing something on the side. It doesn't effect the stream in any way.
.do(doval => console.log('do log: ' + doval))
// this will cause the stream to end.. you may need this if you want the reducer to finish on time
// it will still take the one that fails, it just won't take anymore.
.takeWhile(val => val <= 3)
//the following reducer won't do anything if the above doesn't output anything
// also nothing is outputted until the stream is ended, then the total acc is output
// this causes the subscription to not get a value until the stream completes.
.reduce((acc,curr) => {
console.info('Reduce acc: ' + acc + ' curr: ' + curr);
return acc + curr;
}, 0)
.subscribe(
(a) => console.log((a)? 'Sub output: ' + a : 'Previous func() returned null'),
() => console.log('error'),
() => console.error('stream ended')
);
@helzgate

This comment has been minimized.

Copy link
Owner Author

commented Jan 19, 2017

From a new jsbin, choose to add library and pick rxjs.5.0.0-beta.js or similar. Then click the button in middle of page for ES6/Babel.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.