Skip to content

Instantly share code, notes, and snippets.

@mikeyoon

mikeyoon/index.html

Last active April 5, 2018 00:25
Show Gist options
  • Save mikeyoon/110eedc80c40a5cf299a97c69520850e to your computer and use it in GitHub Desktop.
Save mikeyoon/110eedc80c40a5cf299a97c69520850e to your computer and use it in GitHub Desktop.
Download ZIP
JS BinSwitchmap Example// source http://jsbin.com/dowuyi/edit?html,js,output
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Switchmap Example">
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/q.js/1.0.1/q.js"></script>
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.8/Rx.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<button onclick="newSwitchmap()">New Switchmap</button>
<button onclick="sameSwitchmap()">Same Switchmap</button>
<button onclick="promiseSubscribe()">Subscribe Promise</button>
<button onclick="clearResults()">Clear</button>
<ul id="output">
</ul>
<script type="text/javascript">
var $output = $('#output');
</script>
<script id="jsbin-javascript">
let subject = new Rx.BehaviorSubject(1).skip(1);
let sw = subject.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
let psubject = new Rx.BehaviorSubject(1).skip(1);
let psw = psubject.switchMap(n => {
return Q.resolve(n).then(res => {
let defer = Q.defer();
setTimeout(() => {
$output.append('<li>Promise completed</li>')
defer.resolve('finished!');
}, 2000);
return defer.promise;
});
});
sw.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
psw.subscribe(
res => $output.append('<li>' + res + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
let obs = Rx.Observable.of(1)
.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
function newSwitchmap() {
$output.html('');
obs.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>new closed</li>')
);
}
function sameSwitchmap() {
$output.html('');
subject.next(Math.random());
}
function promiseSubscribe() {
$output.html('');
psubject.next(Math.random());
}
function clearResults() {
$output.html('');
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">let subject = new Rx.BehaviorSubject(1).skip(1);
let sw = subject.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
let psubject = new Rx.BehaviorSubject(1).skip(1);
let psw = psubject.switchMap(n => {
return Q.resolve(n).then(res => {
let defer = Q.defer();
setTimeout(() => {
$output.append('<li>Promise completed</li>')
defer.resolve('finished!');
}, 2000);
return defer.promise;
});
});
sw.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
psw.subscribe(
res => $output.append('<li>' + res + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
let obs = Rx.Observable.of(1)
.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
function newSwitchmap() {
$output.html('');
obs.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>new closed</li>')
);
}
function sameSwitchmap() {
$output.html('');
subject.next(Math.random());
}
function promiseSubscribe() {
$output.html('');
psubject.next(Math.random());
}
function clearResults() {
$output.html('');
}
</script></body>
</html>
Raw
jsbin.dowuyi.js
let subject = new Rx.BehaviorSubject(1).skip(1);
let sw = subject.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
let psubject = new Rx.BehaviorSubject(1).skip(1);
let psw = psubject.switchMap(n => {
return Q.resolve(n).then(res => {
let defer = Q.defer();
setTimeout(() => {
$output.append('<li>Promise completed</li>')
defer.resolve('finished!');
}, 2000);
return defer.promise;
});
});
sw.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
psw.subscribe(
res => $output.append('<li>' + res + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>same closed</li>')
);
let obs = Rx.Observable.of(1)
.switchMap(n => {
return Rx.Observable.interval(1000) // creates an interval observable
.timeInterval() // marks the time
.take(5); // stops after 5 items pass
});
function newSwitchmap() {
$output.html('');
obs.subscribe(
res => $output.append('<li>' + res.value + '</li>'),
err => $output.append('<li>' + err + '</li>'),
() => $output.append('<li>new closed</li>')
);
}
function sameSwitchmap() {
$output.html('');
subject.next(Math.random());
}
function promiseSubscribe() {
$output.html('');
psubject.next(Math.random());
}
function clearResults() {
$output.html('');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment