CODEWITHSUNDEEP
javascripttimer
cadebe
cadebe

Reputation: 691

JavaScript: Pause timer

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.

Upvotes: 1

Views: 1141

Answers (1)

Matt Burland
Matt Burland

Reputation: 45135

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.

Upvotes: 2

Related Questions