Resume Javascript Timer from database value

I would structure your app differently

<div id="app">
<div id="timer">click playdiv>
<a href="#" id="btn_start">PLAYa>
div>
<audio id="audiosource">
<source src="http://www.virtuagym.com/audio/en/get_ready.mp3" type="audio/mpeg" />
<source src="http://www.soundjay.com/button/button-1.wav" type="audio/wav" />
audio>
<audio id="a_1" >
<source src="http://www.virtuagym.com/audio/en/1.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/en/1.mp3" type="audio/mp3" />
audio>
<audio id="a_2" >
<source src="http://www.virtuagym.com/audio/audio/en/2.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/2.mp3" type="audio/mp3" />
audio>
<audio id="a_3" >
<source src="http://www.virtuagym.com/audio/audio/en/3.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/3.mp3" type="audio/mp3" />
audio>
<audio id="a_4" >
<source src="http://www.virtuagym.com/audio/audio/en/4.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/audio/en/4.mp3" type="audio/mp3" />
audio>
<audio id="a_5" >
<source src="http://www.virtuagym.com/audio/audio/en/5.ogg" type="audio/ogg" />
<source src="http://www.virtuagym.com/audio/en/5.mp3" type="audio/mp3" />
audio>

JS code:

(function ($) {
// function to play sounds, calls `done` when sounds are finished to play
// here you should adjust timings for your audio
var playGetReady = function (done) {
var ids = ['audiosource', 'a_5', 'a_4', 'a_3', 'a_2', 'a_1'],
playNext = function () {
var id = ids.shift();
document.getElementById(id).play();
if (ids.length) {
setTimeout(playNext, 1000);
} else {
done();
}
};
playNext();
};
// constructor
function App($el, startFrom) {
this.$el = $el; // root element
this.$timer = this.$('#timer'); // find element to render countdown to
this.$button = this.$('#btn_start'); // play/pause button
// $.proxy(fn, ctx); makes `ctx` to be referenced by `this` inside `fn`
// sets handler on button
this.$button.click($.proxy(this.buttonHandler, this));
// sets value to start countdown
this.set(startFrom);
// we're not running yet
this.intervalHandle = null;
};
// look for elements inside of root element
App.prototype.$ = function () {
return this.$el.find.apply(this.$el, arguments);
};
// called on play/pause button click
App.prototype.buttonHandler = function (e) {
e.preventDefault(); // prevent anchor default action
this.toggle(); // toggle play/pause
};
App.prototype.start = function () {
var self = this;
playGetReady(function () { // play get ready sound
// start countdown
self.intervalHandle = setInterval($.proxy(self.tick, self), 1000);
// change button text to PAUSE
self.$button.text('PAUSE');
});
};
App.prototype.stop = function () {
// stop countdown
clearInterval(this.intervalHandle);
// set `intervalHandle` to null to be able to check whether
// countdown is running or not
this.intervalHandle = null;
// change button text to PLAY
this.$button.text('PLAY');
};
App.prototype.toggle = function () {
// if running
if (this.intervalHandle) {
// then stop
this.stop();
// if not
} else {
// then start
this.start();
}
};
// sets new value for countdown
App.prototype.set = function (timeLeft) {
this.counter = timeLeft;
};
// called every second to update counter, rerender, call `end` callback
// and play sound
App.prototype.tick = function () {
// update countdown
this.counter -= 1;
// push new countdown to page
this.render();
if (this.counter === 0) { // if countdown is finished
this.stop(); // stop decreasing it
this.end(); // end callback, ask for new value or terminate
}
};
// pushed countdown to page
App.prototype.render = function () {
this.$timer.text(this.counter);
};
// on end callback
App.prototype.end = function () {
// ask for new countdown
var text = prompt('end of the first exercise, NOw lets play the second exercise for your with another by loading its time');
if (text) { // if user entered any
var next = Number(text); // convert it to number
this.set(next); // set new countdown value
this.render(); // push changes to page
this.start(); // start countdown
} else { // if user entered nothing
// do nothing
this.$timer.text('You\'re done'); // tell user he finished
}
};
$(function () {
var app = new App($('#app'), 5); // create app
});
})(jQuery);

Note, you should adjust timings in playGetReady according to your sounds. Also, only a_5 and a_1 are loading.

Hope it'll help. I'd also recommend you reading tutorial or book on JavaScript

The t variable won't return current countdown value, it returns the setTimeout id, which used to cancel the timeout function.

So you have to use another variable to record down the current countdown seconds and in the countDownTimer function, instead of assign 60 to seconds, assign the recorded current countdown seconds.

Or you can use a setInterval function to do the countdown job and set a pause boolean value to denote the status:

var paused = false;
var t;
function countDownTimer(seconds){
//before create another timer, remember to cancel the previous one, if has
clearInterval(t);
t = setInterval(function(){
if(!paused){
seconds--;
console.log(seconds);
//you can do display or whatever things here.
}
}, 1000)
}
function pauseOrResumeTimer(){
paused = !paused;
}

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajkiran Swain9y ago
1. "text/javascript">
2. var myVar = setInterval(function () { myTimer() }, 1000);
3. var d = new Date();
4. var starttime = document.getElementById("<%= lbl_total_time.ClientID %>").innerHTML;
5. if (parseInt(starttime) < 10) {
6. starttime = "0" + starttime;
7. }
8. else {
9. starttime = starttime;
10. }
11. d.setHours(00, (parseInt(starttime) - 1), 59, 00);
12. function myTimer() {
13. if (d.getSeconds() <= 1)
14. d.setMinutes(d.getMinutes() - 1, 59, 00);
15. var h = d.getHours();
16. var m = d.getMinutes();
17. var s = d.getSeconds() - 1;
18. if (h == 0 && m == 0 && s == 1) {
19. document.getElementById("<%= lbsendintime.ClientID %>").innerHTML = "00:00:00";
20. }
21. else {
22. if (h < 10) {
23. h = "0" + h;
24. }
25. if (m < 10) {
26. m = "0" + m;
27. }
28. if (s < 10) {
29. s = "0" + s;
30. }
31. document.getElementById("<%= lbsendintime.ClientID %>").innerHTML = h + ":" + m + ":" + s;
32. d.setMinutes(m, s);
33. }
34. }