How to continue timer after pausing it using clearInterval( );

[Nulll]

Hi,

I have the following javascript code:

var bR, bS, tM, oT, tI, hS;

$(document).ready(function() {
    $('#p').click(function() {
        $('#s1').hide();
        gameStart(); <-starts timer
        $('#s2').show();
    });

    $('.b4').click(function() {
        clearInterval(tI); <-stops the time
    });
    $('#r').click(function() {
        tI = setInterval("setTimer()", 1000); <-not working, should have code to continue the timer again
    });
});

When the div #p is clicked it will start a game with a timer, this all works. Now if I click the div .b4 it will stop/pauze the timer, this also works. The problem is to start the timer again, continuing from where it was stopped.

I've tried tI = setInterval("setTimer()", 1000); when clicking the div #r but the problem with this is that is will start the timer, but it will not continue from the time it was stopped. It will continue, but from the time where it should be if it wasn't stopped/pauzed.

So how can I fix this? I want to pause the time (think I have this part right) and then continue it again when clicking #r

This is how my timer function is build:

function gameStart() {
    oT = new Date();
    tI = setInterval("setTimer()", 1000);
}

//Set timer
function setTimer() {
    var n = new Date();
    tM.text(getTimeText(n.getTime() - oT.getTime()));
}

//Build timer
function getTimeText(v) {
    var vH = Math.floor(v / 3600000);
    var vM = Math.floor((v - (vH * 3600000)) / 60000);
    var vS = Math.floor((v - (vH * 3600000) - (vM * 60000)) / 1000);
    return set2Digit(vH) + ':' + set2Digit(vM) + ':' + set2Digit(vS);
}

function set2Digit(ov) {
    var os = '0' + ov;
    return os.substr(os.length - 2, 2);
}

ps:
With this html I get the time to show: <div class="tm">00:00:00</div>

Thank you for you time

[007Julien]

Build a function gameRestart() or transform the function to restart with a new Date().getTime() decreased in shown time (in fact oT.getTime() is the usefull variable, the argument v of the getTimeText function could be a global variable to retain this difference).

NB : tI = setInterval(setTimer, 1000); is better as tI = setInterval("setTimer()", 1000);

[Nulll]

Hi,

Tried that, but that reset the time to 00:00:00 again.

Perhaps I've coded it wrong, could you supply an example?

[007Julien]

Try this (not tested)

var diff=0; // a global variable to retain the timer time

function gameStart() {
    oT = new Date().getTime();
    oT -= diff; // we take the timer time
    tI = setInterval(setTimer, 1000);
}
//Set timer
function setTimer() {
    var n = new Date();
    tM.text(getTimeText(n.getTime() - oT));
}

function getTimeText(v) {
    diff = v; //  we store the last timer time 
    var vH = Math.floor(v / 3600000);
    var vM = Math.floor((v - (vH * 3600000)) / 60000);
    var vS = Math.floor((v - (vH * 3600000) - (vM * 60000)) / 1000);
    return set2Digit(vH) + ':' + set2Digit(vM) + ':' + set2Digit(vS);
}

Then a new call to gameStart will restart the timer with is old time.

Edit : It's only a suggest to reshape ...

[Nulll]

Thanks!

[JunkMale]

function timerRun(){
if( !tI ) tI = setInterval(setTimer, 1000);
}
// start the timer.
timerRun();

Call the function. If the object is already running, the call is ignored.

So you can use timerRun() to start the interval timer routine from other events that you use setInterval timers in.