Skip to content

Instantly share code, notes, and snippets.

@patrickdawson

patrickdawson/index.html

Created February 5, 2018 19:08
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 patrickdawson/ea7d652035aee93dfa94d2e251134263 to your computer and use it in GitHub Desktop.
Save patrickdawson/ea7d652035aee93dfa94d2e251134263 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Delay rxjs events // source https://jsbin.com/kidicot
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Delay rxjs events">
<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="btn1">Gen Save Event</button>
<script id="jsbin-javascript">
let eventData = 0;
const btn1 = document.querySelector('#btn1');
const saveFunc = (data) => {
return new Promise((resolve) => {
setTimeout(() => resolve(data), 1000);
});
};
// see http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeScan
// mergeScan wartet, bis die async Funktion beendet ist.
// 0 ist der Startwert
// 1 bedeutet, dass nur 1 Observable Event auf einmal dran kommt.
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++)
.mergeScan((_, data) => Rx.Observable.fromPromise(saveFunc(data)), 0, 1)
.subscribe(data => console.log(data))
/*
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++);
saveEvents$
.delayWhen(() => {
return Rx.Observable.fromEvent(btn2, 'click')
})
.subscribe((data) => {
console.log(data);
});
*/
</script>
<script id="jsbin-source-javascript" type="text/javascript">let eventData = 0;
const btn1 = document.querySelector('#btn1');
const saveFunc = (data) => {
return new Promise((resolve) => {
setTimeout(() => resolve(data), 1000);
});
};
// see http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeScan
// mergeScan wartet, bis die async Funktion beendet ist.
// 0 ist der Startwert
// 1 bedeutet, dass nur 1 Observable Event auf einmal dran kommt.
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++)
.mergeScan((_, data) => Rx.Observable.fromPromise(saveFunc(data)), 0, 1)
.subscribe(data => console.log(data))
/*
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++);
saveEvents$
.delayWhen(() => {
return Rx.Observable.fromEvent(btn2, 'click')
})
.subscribe((data) => {
console.log(data);
});
*/</script></body>
</html>
Raw
jsbin.kidicot.js
let eventData = 0;
const btn1 = document.querySelector('#btn1');
const saveFunc = (data) => {
return new Promise((resolve) => {
setTimeout(() => resolve(data), 1000);
});
};
// see http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeScan
// mergeScan wartet, bis die async Funktion beendet ist.
// 0 ist der Startwert
// 1 bedeutet, dass nur 1 Observable Event auf einmal dran kommt.
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++)
.mergeScan((_, data) => Rx.Observable.fromPromise(saveFunc(data)), 0, 1)
.subscribe(data => console.log(data))
/*
const saveEvents$ = Rx.Observable.fromEvent(btn1, 'click')
.map(event => eventData++);
saveEvents$
.delayWhen(() => {
return Rx.Observable.fromEvent(btn2, 'click')
})
.subscribe((data) => {
console.log(data);
});
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment