JavaScript: Pause timer

Question

I know this question has been asked before and I did check relevant previous posts, but no joy so far with my code. I can get my timer to pause, however, when I resume, it seems to have ignored the pause function and the time is displayed as if the timer had not been paused.

<!DOCTYPE html>
<html>
    <head>
        <script>
            var dt = null;
            var val;

            function startTimer(){          
                setTimeout(setTime, 100);   
            }

            function setTime() {                
                if (dt == null)
                    dt = new Date();

                var totalseconds = parseInt(((new Date()) - dt) / 1000, 10);
                var hh = parseInt(totalseconds / (60 * 60), 10);
                var mm = parseInt((totalseconds - (hh * 60 * 60)) / 60, 10);
                var ss = parseInt(totalseconds - (hh * 60 * 60) - (mm * 60), 10);
                document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) 
                + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss));
                val = setTimeout(setTime,1000);
            }

            function pauseTimer() {             
                clearTimeout(val);  
            }

            function resumeTimer() {                
                val = setTimeout(setTime,1000);
            }

        </script> 
    </head>
    <body> 
             <form >  
                    <input onclick="startTimer()" type="button" value="START" style="position: absolute; 
                    margin-left: 20%;  margin-top: 10%; width: 75px;"/>                           
                    <input onclick="pauseTimer()" type="button" value="PAUSE" style="position: absolute; 
                    margin-left: 20%;  margin-top: 15%; width: 75px;"/>  
                    <input onclick="resumeTimer()" type="button" value="RESUME" style="position: absolute; 
                    margin-left: 20%; margin-top: 20%; width: 75px;"/>                   
                    <input type="text" readonly name="txttimer" style="position: absolute; width: 100px; 
                    margin-left: 30%; margin-top: 10%; text-align: center"/>   
            </form> 
    </body>
</html>

I would be really grateful if someone could help me out.

Well, check how you calculate the totalSeconds (which are displayed): From the current time and from dt… What do you think could need to be altered? — Bergi
– Bergi, Commented Apr 18, 2014 at 16:33
There are a couple of ways you could approach this, but it all boils down to you are calculating the elapsed time from when the timer started, but you are not taking into account the time that it was paused. You need to subtract "paused" time from your total time by keeping track of it when you pause and resume. — Matt Burland
– Matt Burland, Commented Apr 18, 2014 at 16:41
@Bergi - parseInt() is meant for strings so I don't understand what your comment means. — jfriend00
– jfriend00, Commented Apr 18, 2014 at 16:42
@jfriend00: I think Bergi was objecting to using parseInt() on things that are already numbers to start with (rather than Math.floor). By using parseInt() you force javascript to first convert a number to a string just so it can convert it back to a number. — Matt Burland
– Matt Burland, Commented Apr 18, 2014 at 16:44
@Bergi - you are having trouble typing today even in your next comment. I presume you meant is should NOT be used on things that are already numbers. — jfriend00
– jfriend00, Commented Apr 18, 2014 at 17:10

Matt Burland · Accepted Answer · 2014-04-18 17:20:26Z

There are several ways you could approach this, but the trick is to keep track of the number of seconds you've been paused for and then subtract that from you total time. (alternatively, you could just keep track of seconds elapsed instead of the start time).

Here's one solution:

        var dt = null;
        var val;
        var pauseStart = null;
        var pauseSeconds = 0;

        function startTimer() {
            setTimeout(setTime, 100);
        }

        function setTime() {
            if (dt == null) dt = new Date();

            var totalseconds = Math.floor((new Date() - dt) / 1000);
            totalseconds -= pauseSeconds;
            var hh = Math.floor(totalseconds / (60 * 60));
            var mm = Math.floor((totalseconds - (hh * 60 * 60)) / 60);
            var ss = Math.floor(totalseconds - (hh * 60 * 60) - (mm * 60));
            document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss));
            val = setTimeout(setTime, 1000);
        }

        function pauseTimer() {
            clearTimeout(val);
            pauseStart = Date.now();
        }

        function resumeTimer() {
            pauseSeconds = (Date.now() - pauseStart) / 1000;
            val = setTimeout(setTime, 1000);
        }

http://jsfiddle.net/mww9D/

Note one thing I didn't bother with here (but you absolutely should) is what happens if somebody clicks pause multiple times before they hit resume. Or what if they hit resume when the timer isn't paused? You should have logic to check that the timer is actually running before pausing and that it isn't running when resuming. It would also probably make sense to actually disable the buttons in those cases too.

Collectives™ on Stack Overflow

JavaScript: Pause timer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related