El código está creando una página receptiva. Pero cada vez que presiono detener y luego comenzar de nuevo, la cuenta regresiva se acelera. Los segundos pasan como milisegundos y los minutos pasan como segundos después de aproximadamente 10 paradas y arranques. ¿Cuál podría ser el problema aquí? PD: no he escrito el código para el botón de reinicio.
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>Ha declarado setIntID como una variable local al click en el botón de start y, por lo tanto, no se borra en la función de click del botón de stop .
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>Creo que eso resuelve el problema.
<!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>Ahora veo un aumento de tiempo, pero en su primer clic, en realidad es lento en ms +=4 , así que lo cambié a ms +=10 . Además, no se usa el flag en el controlador de eventos, lo que ayudaría a controlar setInterval() y clearInterval() para que solo exista uno a la vez. Cada vez que se hacía clic en el botón "Inicio" en el código OP, se agregaba otro setInterval() , por lo tanto, los intervalos de tiempo combinados se aceleraban. En el ejemplo, solo hay un controlador de eventos que alterna entre setInterval() y 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>