www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jul 2006
    Posts
    11

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

    Hi,

    I have the following javascript code:

    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:

    Code:
    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

  2. #2
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    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);
    Last edited by 007Julien; 02-03-2012 at 07:41 PM.

  3. #3
    Join Date
    Jul 2006
    Posts
    11
    Hi,

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

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

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,277
    Try this (not tested)
    Code:
    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 ...
    Last edited by 007Julien; 02-03-2012 at 08:38 PM.

  5. #5
    Join Date
    Jul 2006
    Posts
    11
    Thanks!

  6. #6
    Join Date
    Jan 2009
    Location
    Insanity
    Posts
    1,131
    Code:
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles