Skip to content

Instantly share code, notes, and snippets.

@CoffiDev

CoffiDev/index.html

Created March 28, 2017 22:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CoffiDev/9555fe0429ad9fff758d643504ddd79c to your computer and use it in GitHub Desktop.
Save CoffiDev/9555fe0429ad9fff758d643504ddd79c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/vubosuw
Raw
index.html
<!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/rxjs@5.0.3/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>
Raw
jsbin.vubosuw.js
'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