Last active
January 20, 2017 20:02
-
-
Save PostImpatica/c29afb2fcce59b2f7ce21aa700ad4057 to your computer and use it in GitHub Desktop.
rxjs jsbin file for testing combineLatest vs zip vs withLatestFrom
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<button style="margin-top:80px" id="myClick">Click me</button> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 forES6/Babel
.