Another stopwatch using JS?

user_19652323 0
Viewed 57

The code is creating a responsive page. But every time I press stop and then start again the countdown speeds up. Seconds pass like milliseconds and mins pass like seconds after about 10 or so stops and starts. What might be the issue here? P.S. I haven't written code for the reset button.

            let ms = 0;
            let secs = 0;
            let mins =0;
            let flag = true;
            var setIntID;
            watchFunction =()=> {
                if(flag){
                  ms +=4 ;
                  document.getElementById('msecs').innerText = `${ms}`;
                  if(ms == 1000){
                     ms =0;
                     secs++
                     document.getElementById('secs').innerText = `${secs}:`
                     if(secs == 60){
                        mins++;
                        document.getElementById('min').innerText = `${mins}:`;
                        secs = 0;
                      }
                }}}
                
            document.getElementById("start").addEventListener('click', function(){
                flag = true;
                var setIntID = setInterval(watchFunction,1);
                console.log(flag) //tracker
                })
    
            document.getElementById("stop").addEventListener('click', function(){
                flag = false;
                console.log(flag); //tracker
                clearInterval(setIntID);
                })
         <div id="mainDiv">
            <div>
                <span id="min">0:</span>
                <span id="secs">0:</span>
                <span id="msecs">0</span>
                <div>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
                </div>
            </div>
        </div>

html javascript
3 Answers

You have declared setIntID as a local variable in click for the start button, and therefore it isn't cleared in the click function for the stopbutton.

            let ms = 0;
            let secs = 0;
            let mins =0;
            let flag = false;
            var setIntID;
            watchFunction =()=> {
                if(flag){
                  ms +=4 ;
                  document.getElementById('msecs').innerText = `${ms}`;
                  if(ms == 1000){
                     ms =0;
                     secs++
                     document.getElementById('secs').innerText = `${secs}:`
                     if(secs == 60){
                        mins++;
                        document.getElementById('min').innerText = `${mins}:`;
                        secs = 0;
                      }
                }}}
                
            document.getElementById("start").addEventListener('click', function(){
                if (flag) return;
                flag = true;
                setIntID = setInterval(watchFunction,1);
                console.log(flag) //tracker
                })
    
            document.getElementById("stop").addEventListener('click', function(){
                flag = false;
                console.log(flag); //tracker
                clearInterval(setIntID);
                })
         <div id="mainDiv">
            <div>
                <span id="min">0:</span>
                <span id="secs">0:</span>
                <span id="msecs">0</span>
                <div>
                <button id="start">start</button>
                <button id="stop">stop</button>
                <button id="reset">reset</button>
                </div>
            </div>
        </div>

user_43619990

I think that solves the problem.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="mainDiv">
        <div>
            <span id="min">0:</span>
            <span id="secs">0:</span>
            <span id="msecs">0</span>
            <div>
            <button id="start">start</button>
            <button id="stop">stop</button>
            <button id="reset">reset</button>
            </div>
        </div>
    </div>
    <script>
        let ms = 0;
        let secs = 0;
        let mins =0;
        let flag = true;
        var setIntID;
        var running_instance_count = 0;
        watchFunction =()=> {
            if(flag){
              ms +=4 ;
              document.getElementById('msecs').innerText = `${ms}`;
              if(ms == 1000){
                 ms =0;
                 secs++
                 document.getElementById('secs').innerText = `${secs}:`
                 if(secs == 60){
                    mins++;
                    document.getElementById('min').innerText = `${mins}:`;
                    secs = 0;
                  }
            }}}
            
        document.getElementById("start").addEventListener('click', function(){
            flag = true;
            running_instance_count++;
            if(running_instance_count == 1){
            setIntID = setInterval(watchFunction,1);}
            console.log(flag) //tracker
            })

        document.getElementById("stop").addEventListener('click', function(){
            flag = false;
            running_instance_count = 0;
            console.log(flag); //tracker
            clearInterval(setIntID);
            })

        document.getElementById('reset').addEventListener('click', function(){
            flag = false;
            ms=0; secs=0; mins=0;

            running_instance_count = 0;
            clearInterval(setIntID);
            document.getElementById('msecs').innerText = `${0}`;
            document.getElementById('secs').innerText = `${0}:`;
            document.getElementById('min').innerText = `${0}:`;

        })
    </script>
</body>
</html>
user_196523230

I see a time boost now, but on it's it's first click it's actually slow at ms +=4 so I changed it to ms +=10. Also, there's no usage of the flag on the event handler which would help control the setInterval() and clearInterval() so that there is only one existing at a time. Everytime the "start" button was clicked in OP code there was another setInterval() added, therefore the time intervals combined accelerated. In the example, there's only one event handler that toggles between setInterval() and clearInterval().

let mil = 0;
let sec = 0;
let min = 0;
let flag = false;
let setIntID;

const form = document.forms.stopWatch;
const fc = form.elements;

const timer = () => {
  if (flag) {
    fc.milliseconds.value = mil += 10;
    if (mil == 1000) {
      mil = 0;
      sec++;
      if (sec < 10) sec = '0' + sec;
      fc.seconds.value = sec + ' :';
      if (sec == 60) {
        min++;
        if (min < 10) min = '0' + min;
        fc.minutes.value = min + ' :';
        sec = 0;
      }
    }
  }
}

fc.toggle.addEventListener('click', function() {
  if (!flag) {
    flag = true;
    setIntID = setInterval(timer, 1);
    return
  }
  clearInterval(setIntID);
  flag = false;
});

form.onreset = e => {
  mil = 0;
  sec = 0; 
  min = 0;
  clearInterval(setIntID);
  flag = false;
}
<form id="stopWatch">
  <fieldset>
    <output id="minutes">00 :</output>
    <output id="seconds">00 :</output>
    <output id="milliseconds">000</output><br>
    <button id="toggle" type='button'>Start/Stop</button>
    <button type="reset">Reset</button>
  </fieldset>
</form>

user_28132240
Related