Created
December 7, 2017 15:54
-
-
Save lionelB/9c572950f860e725d2088f04bc60d952 to your computer and use it in GitHub Desktop.
Pausable Timer // source http://jsbin.com/kavomij
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>Pausable Timer</title> | |
<script src="https://unpkg.com/@reactivex/rxjs@5.1.1/dist/global/Rx.js"></script> | |
</head> | |
<body> | |
<button class="start5">start 5</button> | |
<button class="reset">reset</button> | |
<button class="pause">pause</button> | |
<code class="render"></code> | |
<script id="jsbin-javascript"> | |
'use strict'; | |
var start5Bt = document.querySelector('.start5'); | |
var pauseBt = document.querySelector('.pause'); | |
var view = document.querySelector('.render'); | |
var dec = function dec(acc) { | |
return acc - 1; | |
}; | |
var pause = function pause(val) { | |
return val.pause / 1000; | |
}; | |
var start = function start(val) { | |
return val.duration / 1000; | |
}; | |
var start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(function () { | |
return 5; | |
}); | |
var pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(function () { | |
return 2; | |
}); | |
var interval$ = Rx.Observable.interval(1000); | |
var render = function render(time) { | |
view.innerHTML = '' + time; | |
}; | |
var decrement$ = Rx.Observable.merge(interval$.takeUntil(pause$).mapTo(dec), pause$.map(function (v) { | |
return function () { | |
return v; | |
}; | |
})); | |
start5$.switchMap(function (val) { | |
return decrement$.startWith(val).scan(function (value, decrement) { | |
return decrement(value); | |
}).takeWhile(function (val) { | |
return val >= 0; | |
}); | |
}).subscribe(render); | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript"> | |
const start5Bt = document.querySelector('.start5'); | |
const pauseBt = document.querySelector('.pause'); | |
const view = document.querySelector('.render'); | |
const dec = (acc) => acc - 1 | |
const pause = (val) => { | |
return val.pause / 1000 | |
} | |
const start = (val) => { | |
return val.duration / 1000 | |
} | |
const start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(() => 5) | |
const pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(() => 2) | |
const interval$ = Rx.Observable.interval(1000) | |
const render = (time) => { | |
view.innerHTML = `${time}` | |
} | |
const decrement$ = Rx.Observable.merge( | |
interval$.takeUntil(pause$).mapTo(dec), | |
pause$.map(v => () => v) | |
) | |
start5$ | |
.switchMap(val => decrement$ | |
.startWith(val) | |
.scan((value, decrement) => decrement(value)) | |
.takeWhile(val => val >= 0) | |
) | |
.subscribe(render) | |
</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 start5Bt = document.querySelector('.start5'); | |
var pauseBt = document.querySelector('.pause'); | |
var view = document.querySelector('.render'); | |
var dec = function dec(acc) { | |
return acc - 1; | |
}; | |
var pause = function pause(val) { | |
return val.pause / 1000; | |
}; | |
var start = function start(val) { | |
return val.duration / 1000; | |
}; | |
var start5$ = Rx.Observable.fromEvent(start5Bt, 'click').map(function () { | |
return 5; | |
}); | |
var pause$ = Rx.Observable.fromEvent(pauseBt, 'click').map(function () { | |
return 2; | |
}); | |
var interval$ = Rx.Observable.interval(1000); | |
var render = function render(time) { | |
view.innerHTML = '' + time; | |
}; | |
var decrement$ = Rx.Observable.merge(interval$.takeUntil(pause$).mapTo(dec), pause$.map(function (v) { | |
return function () { | |
return v; | |
}; | |
})); | |
start5$.switchMap(function (val) { | |
return decrement$.startWith(val).scan(function (value, decrement) { | |
return decrement(value); | |
}).takeWhile(function (val) { | |
return val >= 0; | |
}); | |
}).subscribe(render); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment