Skip to content

Instantly share code, notes, and snippets.

@code-brewer

code-brewer/index.html

Last active October 26, 2019 03:09
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 code-brewer/9e07c0ebb1884a36717c5722ab289431 to your computer and use it in GitHub Desktop.
Save code-brewer/9e07c0ebb1884a36717c5722ab289431 to your computer and use it in GitHub Desktop.
Download ZIP
rxjs_v6.x_cdn_defer_demo2 // source https://jsbin.com/josumud
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>rxjs_v6.x_cdn_defer_demo2 </title>
<!-- <script src="https://npmcdn.com/@reactivex/rxjs@5.0.0-beta.3/dist/global/Rx.umd.js"></script> -->
<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"> </script>
</head>
<body>
<script id="jsbin-javascript">
"use strict";
var of = rxjs.of, timer = rxjs.timer, defer = rxjs.defer, merge = rxjs.merge;
var _a = rxjs.operators, switchMap = _a.switchMap, concatMap = _a.concatMap;
// refer: https://www.learnrxjs.io/operators/creation/defer.html
var now = function () {
var _now = new Date();
return "[Second: " + _now.getSeconds() + ":" + _now.getMilliseconds() + "]";
};
var s1 = function (label) { return of((label + ":") + now()); }; //will capture current date time
var s2 = function (label) { return defer(function () { return of((label + ":") + now()); }); }; //will capture date time at the moment of subscription
console.log("switchMap Start: " + now());
// case: switchMap
timer(2000)
.pipe(switchMap(function (_) { return merge(s1("switchMap"), s2("switchMap")); }))
.subscribe(console.log);
console.log("concatMap Start: " + now());
// case: concatMap --- got the same result as switchMap in this example
timer(2000)
.pipe(concatMap(function (_) { return merge(s1("concatMap"), s2("concatMap")); }))
.subscribe(console.log);
/*
If change to :
timer(2000)
.pipe(merge(s1, s2))
.subscribe(console.log);
will got error: "TypeError: La(...) is not a function"
*/
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQVEsZ0JBQUUsRUFBRSxrQkFBSyxFQUFFLGtCQUFLLEVBQUUsa0JBQUssQ0FBVTtBQUV6QyxJQUFBLG1CQUE4QyxFQUF0Qyx3QkFBUyxFQUFFLHdCQUFTLENBQW1CO0FBRS9DLGdFQUFnRTtBQUVoRSxJQUFJLEdBQUcsR0FBRztJQUNSLElBQUksSUFBSSxHQUFHLElBQUksSUFBSSxFQUFFLENBQUE7SUFDckIsTUFBTSxDQUFDLGNBQVksSUFBSSxDQUFDLFVBQVUsRUFBRSxTQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsTUFBRyxDQUFBO0FBQ25FLENBQUMsQ0FBQTtBQUVELElBQU0sRUFBRSxHQUFHLFVBQUMsS0FBSyxJQUFLLE9BQUEsRUFBRSxDQUFDLENBQUcsS0FBSyxPQUFHLEdBQUcsR0FBRyxFQUFFLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxDQUFDLGdDQUFnQztBQUMvRSxJQUFNLEVBQUUsR0FBRyxVQUFDLEtBQUssSUFBSyxPQUFBLEtBQUssQ0FBQyxjQUFNLE9BQUEsRUFBRSxDQUFDLENBQUcsS0FBSyxPQUFHLEdBQUcsR0FBRyxFQUFFLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxFQUFwQyxDQUFvQyxDQUFDLENBQUMsc0RBQXNEO0FBRWxILE9BQU8sQ0FBQyxHQUFHLENBQUMsbUJBQW1CLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQztBQUN6QyxrQkFBa0I7QUFDbEIsS0FBSyxDQUFDLElBQUksQ0FBQztLQUNSLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxLQUFLLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxFQUF2QyxDQUF1QyxDQUFDLENBQUM7S0FDN0QsU0FBUyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUcxQixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQixHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUM7QUFDekMsd0VBQXdFO0FBQ3hFLEtBQUssQ0FBQyxJQUFJLENBQUM7S0FDUixJQUFJLENBQUMsU0FBUyxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsS0FBSyxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFBRSxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsRUFBdkMsQ0FBdUMsQ0FBQyxDQUFDO0tBQzdELFNBQVMsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7QUFJMUI7Ozs7Ozs7O0lBUUkiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCB7IG9mLCB0aW1lciwgZGVmZXIsIG1lcmdlIH0gPSByeGpzO1xuXG5jb25zdCB7IHN3aXRjaE1hcCwgY29uY2F0TWFwfSA9IHJ4anMub3BlcmF0b3JzO1xuXG4vLyByZWZlcjogaHR0cHM6Ly93d3cubGVhcm5yeGpzLmlvL29wZXJhdG9ycy9jcmVhdGlvbi9kZWZlci5odG1sXG5cbmxldCBub3cgPSAoKSA9PiB7XG4gIGxldCBfbm93ID0gbmV3IERhdGUoKVxuICByZXR1cm4gYFtTZWNvbmQ6ICR7X25vdy5nZXRTZWNvbmRzKCl9OiR7X25vdy5nZXRNaWxsaXNlY29uZHMoKX1dYFxufVxuXG5jb25zdCBzMSA9IChsYWJlbCkgPT4gb2YoYCR7bGFiZWx9OmAgKyBub3coKSk7IC8vd2lsbCBjYXB0dXJlIGN1cnJlbnQgZGF0ZSB0aW1lXG5jb25zdCBzMiA9IChsYWJlbCkgPT4gZGVmZXIoKCkgPT4gb2YoYCR7bGFiZWx9OmAgKyBub3coKSkpOyAvL3dpbGwgY2FwdHVyZSBkYXRlIHRpbWUgYXQgdGhlIG1vbWVudCBvZiBzdWJzY3JpcHRpb25cblxuY29uc29sZS5sb2coXCJzd2l0Y2hNYXAgU3RhcnQ6IFwiICsgbm93KCkpO1xuLy8gY2FzZTogc3dpdGNoTWFwXG50aW1lcigyMDAwKVxuICAucGlwZShzd2l0Y2hNYXAoXyA9PiBtZXJnZShzMShcInN3aXRjaE1hcFwiKSwgczIoXCJzd2l0Y2hNYXBcIikpKSlcbiAgLnN1YnNjcmliZShjb25zb2xlLmxvZyk7XG5cblxuY29uc29sZS5sb2coXCJjb25jYXRNYXAgU3RhcnQ6IFwiICsgbm93KCkpO1xuLy8gY2FzZTogY29uY2F0TWFwICAtLS0gZ290IHRoZSBzYW1lIHJlc3VsdCBhcyBzd2l0Y2hNYXAgaW4gdGhpcyBleGFtcGxlXG50aW1lcigyMDAwKVxuICAucGlwZShjb25jYXRNYXAoXyA9PiBtZXJnZShzMShcImNvbmNhdE1hcFwiKSwgczIoXCJjb25jYXRNYXBcIikpKSlcbiAgLnN1YnNjcmliZShjb25zb2xlLmxvZyk7XG5cblxuXG4vKlxuSWYgY2hhbmdlIHRvIDpcbnRpbWVyKDIwMDApXG4gIC5waXBlKG1lcmdlKHMxLCBzMikpXG4gIC5zdWJzY3JpYmUoY29uc29sZS5sb2cpOyAgXG5cbndpbGwgZ290IGVycm9yOiAgIFwiVHlwZUVycm9yOiBMYSguLi4pIGlzIG5vdCBhIGZ1bmN0aW9uXCJcblxuICAqLyJdfQ==
</script>
<script id="jsbin-source-javascript" type="text/javascript">const { of, timer, defer, merge } = rxjs;
const { switchMap, concatMap} = rxjs.operators;
// refer: https://www.learnrxjs.io/operators/creation/defer.html
let now = () => {
let _now = new Date()
return `[Second: ${_now.getSeconds()}:${_now.getMilliseconds()}]`
}
const s1 = (label) => of(`${label}:` + now()); //will capture current date time
const s2 = (label) => defer(() => of(`${label}:` + now())); //will capture date time at the moment of subscription
console.log("switchMap Start: " + now());
// case: switchMap
timer(2000)
.pipe(switchMap(_ => merge(s1("switchMap"), s2("switchMap"))))
.subscribe(console.log);
console.log("concatMap Start: " + now());
// case: concatMap --- got the same result as switchMap in this example
timer(2000)
.pipe(concatMap(_ => merge(s1("concatMap"), s2("concatMap"))))
.subscribe(console.log);
/*
If change to :
timer(2000)
.pipe(merge(s1, s2))
.subscribe(console.log);
will got error: "TypeError: La(...) is not a function"
*/
</script></body>
</html>
Raw
jsbin.josumud.js
"use strict";
var of = rxjs.of, timer = rxjs.timer, defer = rxjs.defer, merge = rxjs.merge;
var _a = rxjs.operators, switchMap = _a.switchMap, concatMap = _a.concatMap;
// refer: https://www.learnrxjs.io/operators/creation/defer.html
var now = function () {
var _now = new Date();
return "[Second: " + _now.getSeconds() + ":" + _now.getMilliseconds() + "]";
};
var s1 = function (label) { return of((label + ":") + now()); }; //will capture current date time
var s2 = function (label) { return defer(function () { return of((label + ":") + now()); }); }; //will capture date time at the moment of subscription
console.log("switchMap Start: " + now());
// case: switchMap
timer(2000)
.pipe(switchMap(function (_) { return merge(s1("switchMap"), s2("switchMap")); }))
.subscribe(console.log);
console.log("concatMap Start: " + now());
// case: concatMap --- got the same result as switchMap in this example
timer(2000)
.pipe(concatMap(function (_) { return merge(s1("concatMap"), s2("concatMap")); }))
.subscribe(console.log);
/*
If change to :
timer(2000)
.pipe(merge(s1, s2))
.subscribe(console.log);
will got error: "TypeError: La(...) is not a function"
*/
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoianNiaW4uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyJqc2Jpbi50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQVEsZ0JBQUUsRUFBRSxrQkFBSyxFQUFFLGtCQUFLLEVBQUUsa0JBQUssQ0FBVTtBQUV6QyxJQUFBLG1CQUE4QyxFQUF0Qyx3QkFBUyxFQUFFLHdCQUFTLENBQW1CO0FBRS9DLGdFQUFnRTtBQUVoRSxJQUFJLEdBQUcsR0FBRztJQUNSLElBQUksSUFBSSxHQUFHLElBQUksSUFBSSxFQUFFLENBQUE7SUFDckIsTUFBTSxDQUFDLGNBQVksSUFBSSxDQUFDLFVBQVUsRUFBRSxTQUFJLElBQUksQ0FBQyxlQUFlLEVBQUUsTUFBRyxDQUFBO0FBQ25FLENBQUMsQ0FBQTtBQUVELElBQU0sRUFBRSxHQUFHLFVBQUMsS0FBSyxJQUFLLE9BQUEsRUFBRSxDQUFDLENBQUcsS0FBSyxPQUFHLEdBQUcsR0FBRyxFQUFFLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxDQUFDLGdDQUFnQztBQUMvRSxJQUFNLEVBQUUsR0FBRyxVQUFDLEtBQUssSUFBSyxPQUFBLEtBQUssQ0FBQyxjQUFNLE9BQUEsRUFBRSxDQUFDLENBQUcsS0FBSyxPQUFHLEdBQUcsR0FBRyxFQUFFLENBQUMsRUFBdkIsQ0FBdUIsQ0FBQyxFQUFwQyxDQUFvQyxDQUFDLENBQUMsc0RBQXNEO0FBRWxILE9BQU8sQ0FBQyxHQUFHLENBQUMsbUJBQW1CLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQztBQUN6QyxrQkFBa0I7QUFDbEIsS0FBSyxDQUFDLElBQUksQ0FBQztLQUNSLElBQUksQ0FBQyxTQUFTLENBQUMsVUFBQSxDQUFDLElBQUksT0FBQSxLQUFLLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxFQUF2QyxDQUF1QyxDQUFDLENBQUM7S0FDN0QsU0FBUyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUcxQixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQixHQUFHLEdBQUcsRUFBRSxDQUFDLENBQUM7QUFDekMsd0VBQXdFO0FBQ3hFLEtBQUssQ0FBQyxJQUFJLENBQUM7S0FDUixJQUFJLENBQUMsU0FBUyxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsS0FBSyxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsRUFBRSxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsRUFBdkMsQ0FBdUMsQ0FBQyxDQUFDO0tBQzdELFNBQVMsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLENBQUM7QUFJMUI7Ozs7Ozs7O0lBUUkiLCJzb3VyY2VzQ29udGVudCI6WyJjb25zdCB7IG9mLCB0aW1lciwgZGVmZXIsIG1lcmdlIH0gPSByeGpzO1xuXG5jb25zdCB7IHN3aXRjaE1hcCwgY29uY2F0TWFwfSA9IHJ4anMub3BlcmF0b3JzO1xuXG4vLyByZWZlcjogaHR0cHM6Ly93d3cubGVhcm5yeGpzLmlvL29wZXJhdG9ycy9jcmVhdGlvbi9kZWZlci5odG1sXG5cbmxldCBub3cgPSAoKSA9PiB7XG4gIGxldCBfbm93ID0gbmV3IERhdGUoKVxuICByZXR1cm4gYFtTZWNvbmQ6ICR7X25vdy5nZXRTZWNvbmRzKCl9OiR7X25vdy5nZXRNaWxsaXNlY29uZHMoKX1dYFxufVxuXG5jb25zdCBzMSA9IChsYWJlbCkgPT4gb2YoYCR7bGFiZWx9OmAgKyBub3coKSk7IC8vd2lsbCBjYXB0dXJlIGN1cnJlbnQgZGF0ZSB0aW1lXG5jb25zdCBzMiA9IChsYWJlbCkgPT4gZGVmZXIoKCkgPT4gb2YoYCR7bGFiZWx9OmAgKyBub3coKSkpOyAvL3dpbGwgY2FwdHVyZSBkYXRlIHRpbWUgYXQgdGhlIG1vbWVudCBvZiBzdWJzY3JpcHRpb25cblxuY29uc29sZS5sb2coXCJzd2l0Y2hNYXAgU3RhcnQ6IFwiICsgbm93KCkpO1xuLy8gY2FzZTogc3dpdGNoTWFwXG50aW1lcigyMDAwKVxuICAucGlwZShzd2l0Y2hNYXAoXyA9PiBtZXJnZShzMShcInN3aXRjaE1hcFwiKSwgczIoXCJzd2l0Y2hNYXBcIikpKSlcbiAgLnN1YnNjcmliZShjb25zb2xlLmxvZyk7XG5cblxuY29uc29sZS5sb2coXCJjb25jYXRNYXAgU3RhcnQ6IFwiICsgbm93KCkpO1xuLy8gY2FzZTogY29uY2F0TWFwICAtLS0gZ290IHRoZSBzYW1lIHJlc3VsdCBhcyBzd2l0Y2hNYXAgaW4gdGhpcyBleGFtcGxlXG50aW1lcigyMDAwKVxuICAucGlwZShjb25jYXRNYXAoXyA9PiBtZXJnZShzMShcImNvbmNhdE1hcFwiKSwgczIoXCJjb25jYXRNYXBcIikpKSlcbiAgLnN1YnNjcmliZShjb25zb2xlLmxvZyk7XG5cblxuXG4vKlxuSWYgY2hhbmdlIHRvIDpcbnRpbWVyKDIwMDApXG4gIC5waXBlKG1lcmdlKHMxLCBzMikpXG4gIC5zdWJzY3JpYmUoY29uc29sZS5sb2cpOyAgXG5cbndpbGwgZ290IGVycm9yOiAgIFwiVHlwZUVycm9yOiBMYSguLi4pIGlzIG5vdCBhIGZ1bmN0aW9uXCJcblxuICAqLyJdfQ==
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment