Reputation: 1

Can't get a pause function to work with my javascript stopwatch

Can some one help me. I can't seem to get this stopwatch to pause and displayed the paused(stopped) time, and then reactivate when I hit start again.

I don't know how to stop the timer from counting up. Not sure if it's best practice to end the timer function, create a new function for current time, or to keep subtracting 1 from it using the setInterval?

<script type="text/javascript">
var digit=-1.0;
var min=0;
var time;


function timer(){
        digit++;       

        if(digit>59){
                min++;
                document.getElementById("mins").innerHTML=padTimer(min);
                digit=0;
        }
        document.getElementById("secs").innerHTML=padTimer(digit);  
}

function padTimer(x) {
        if (x<=9) { x = ("0"+x); }
        return x;
}  

function start(){
                time=setInterval(timer, 1000);
                timer();
}

function pause() {
}

function reset(){
            digit=-1.0;
            timerPay=0;              
}

</script>

<a href="#" onclick="start()">Click here to start the timer</a>
<a href="#" onclick="pause()">Click here to pause the timer</a>

<a href="#" onclick="reset()">Click here to reset the timer</a>

<div>
<span id="mins" >00</span>:<span id="secs">00</span><br>
</div>

Upvotes: 0

Answers (4)

Roy Miloh

Reputation: 3411

No doubt that clearInterval is your answer, but you have a serious bug in your code: what if a user clicks on the start button a lot of times (clue: a lot of intervals are registered)?

I wrote a more reasonable constructor function for you. when a user clicks start, timerStarted changes to true and vice versa. In addition, as it is a constructor function, there is no global variables (except the Timer function itself) and you can create as timers as you want. each timer should be created by the new reserved keyword.

function Timer (intervalSeconds) {
    this.__intervalSeconds = intervalSeconds;
    this.reset();
};

Timer.prototype.start = function () {
    if (!this.__timerStarted) {
        var self = this;

        this.__timerEventRegistered = setInterval(function() {
            self.timeElapsed += self.__intervalSeconds;
        }, this.__intervalSeconds);
    }
    this.timerStarted = true;
};

Timer.prototype.pause = function () {
    clearInterval(this.__timerEventRegistered);
    this._timerStarted = false;
}

Timer.prototype.reset = function () {
    this.pause();
    this.timeElapsed = 0;
}

// Timer creation example; the timer will be updated each 1000 milliseconds (= 1 second).
var timer = new Timer(1000);

You have an access to timer.timeElapsed so you can see the time and doing some manipulates.

PLEASE NOTE: as Javascript is a single-threaded, there is no guarantee that the timer will work perfectly. actually, it could be far away from this in some situations.

Upvotes: 1