Created
March 28, 2017 22:06
-
-
Save CoffiDev/9555fe0429ad9fff758d643504ddd79c to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/vubosuw
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>JS Bin</title> | |
</head> | |
<body> | |
<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script> | |
<button id="start">start</button> | |
<button id="stop">stop</button> | |
<button id="reset">Reset</button> | |
<script id="jsbin-javascript"> | |
'use strict'; | |
var _Rx = Rx; | |
var Observable = _Rx.Observable; | |
var startButton = document.querySelector('#start'); | |
var stopButton = document.querySelector('#stop'); | |
/* | |
clase 1 - ejem 1 | |
Observable | |
.fromEvent(startButton, 'click') | |
.subscribe((event) => { | |
//console.log(event) | |
Observable | |
.interval(1000) | |
.subscribe((x) => { | |
console.log(x) | |
}) | |
}) | |
*/ | |
/* | |
clase 1 - ejem 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
start$ | |
.switchMap(event => interval$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* | |
clase 1 - ejem 3 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
startInterval$.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 2 +++ */ | |
/* | |
ejemplo 1 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
startInterval$ | |
.takeUntil(stop$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* ejemplo 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 3 +++ */ | |
/* | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}, {count: 0}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 4 +++ */ | |
var start$ = Observable.fromEvent(startButton, 'click'); | |
var interval$ = Observable.interval(1000); | |
var startInterval$ = start$.switchMapTo(interval$); | |
var stop$ = Observable.fromEvent(stopButton, 'click'); | |
var intervalThatStops$ = interval$.takeUntil(stop$); | |
var data = { count: 0 }; | |
/* | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.startWith(data) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 5 +++ */ | |
var inc = function inc(acum) { | |
return { count: acum.count + 1 }; | |
}; | |
var reset = function reset(acum) { | |
return data; | |
}; | |
/*start$ | |
.switchMapTo(intervalThatStops$) | |
.mapTo(inc) | |
.startWith(data) | |
.scan((acum, current) => current(acum)) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* extra */ | |
var resetButton = document.querySelector('#reset'); | |
var counterThatStops$ = start$.switchMapTo(intervalThatStops$).mapTo(inc); | |
var reset$ = Observable.fromEvent(resetButton, 'click'); | |
var resetCounter$ = reset$.mapTo(reset); | |
counterThatStops$.merge(resetCounter$).startWith(data).scan(function (acum, current) { | |
return current(acum); | |
}).subscribe(function (x) { | |
return console.log(x); | |
}); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">var { Observable } = Rx; | |
const startButton = document.querySelector('#start') | |
const stopButton = document.querySelector('#stop') | |
/* | |
clase 1 - ejem 1 | |
Observable | |
.fromEvent(startButton, 'click') | |
.subscribe((event) => { | |
//console.log(event) | |
Observable | |
.interval(1000) | |
.subscribe((x) => { | |
console.log(x) | |
}) | |
}) | |
*/ | |
/* | |
clase 1 - ejem 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
start$ | |
.switchMap(event => interval$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* | |
clase 1 - ejem 3 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
startInterval$.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 2 +++ */ | |
/* | |
ejemplo 1 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
startInterval$ | |
.takeUntil(stop$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* ejemplo 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 3 +++ */ | |
/* | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}, {count: 0}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 4 +++ */ | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
var data = {count: 0} | |
/* | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.startWith(data) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 5 +++ */ | |
var inc = acum => ({count: acum.count + 1}) | |
var reset = acum => data | |
/*start$ | |
.switchMapTo(intervalThatStops$) | |
.mapTo(inc) | |
.startWith(data) | |
.scan((acum, current) => current(acum)) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* extra */ | |
const resetButton = document.querySelector('#reset') | |
var counterThatStops$ = start$ | |
.switchMapTo(intervalThatStops$) | |
.mapTo(inc) | |
var reset$ = Observable.fromEvent(resetButton, 'click') | |
var resetCounter$ = reset$ | |
.mapTo(reset) | |
counterThatStops$ | |
.merge(resetCounter$) | |
.startWith(data) | |
.scan((acum, current) => current(acum)) | |
.subscribe(x => console.log(x)) | |
</script></body> | |
</html> |
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
'use strict'; | |
var _Rx = Rx; | |
var Observable = _Rx.Observable; | |
var startButton = document.querySelector('#start'); | |
var stopButton = document.querySelector('#stop'); | |
/* | |
clase 1 - ejem 1 | |
Observable | |
.fromEvent(startButton, 'click') | |
.subscribe((event) => { | |
//console.log(event) | |
Observable | |
.interval(1000) | |
.subscribe((x) => { | |
console.log(x) | |
}) | |
}) | |
*/ | |
/* | |
clase 1 - ejem 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
start$ | |
.switchMap(event => interval$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* | |
clase 1 - ejem 3 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
startInterval$.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 2 +++ */ | |
/* | |
ejemplo 1 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
startInterval$ | |
.takeUntil(stop$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* ejemplo 2 | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 3 +++ */ | |
/* | |
var start$ = Observable.fromEvent(startButton, 'click') | |
var interval$ = Observable.interval(1000) | |
var startInterval$ = start$.switchMapTo(interval$) | |
var stop$ = Observable.fromEvent(stopButton, 'click') | |
var intervalThatStops$ = interval$ | |
.takeUntil(stop$) | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}, {count: 0}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 4 +++ */ | |
var start$ = Observable.fromEvent(startButton, 'click'); | |
var interval$ = Observable.interval(1000); | |
var startInterval$ = start$.switchMapTo(interval$); | |
var stop$ = Observable.fromEvent(stopButton, 'click'); | |
var intervalThatStops$ = interval$.takeUntil(stop$); | |
var data = { count: 0 }; | |
/* | |
start$ | |
.switchMapTo(intervalThatStops$) | |
.startWith(data) | |
.scan(acum => { | |
return {count: acum.count + 1} | |
}) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* +++ clase 5 +++ */ | |
var inc = function inc(acum) { | |
return { count: acum.count + 1 }; | |
}; | |
var reset = function reset(acum) { | |
return data; | |
}; | |
/*start$ | |
.switchMapTo(intervalThatStops$) | |
.mapTo(inc) | |
.startWith(data) | |
.scan((acum, current) => current(acum)) | |
.subscribe(x => console.log(x)) | |
*/ | |
/* extra */ | |
var resetButton = document.querySelector('#reset'); | |
var counterThatStops$ = start$.switchMapTo(intervalThatStops$).mapTo(inc); | |
var reset$ = Observable.fromEvent(resetButton, 'click'); | |
var resetCounter$ = reset$.mapTo(reset); | |
counterThatStops$.merge(resetCounter$).startWith(data).scan(function (acum, current) { | |
return current(acum); | |
}).subscribe(function (x) { | |
return console.log(x); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment