Another stopwatch using JS?-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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>