Décalage du compte à rebours à partir du compteur

Question

Création d'un compteur de comptage simple en JavaScript. Lorsque je clique sur le bouton de démarrage, il y a un décalage entre le moment où le bouton est cliqué et le début de la minuterie. Quelqu'un peut-il s'il vous plaît expliquer pourquoi c'est. Je suis un débutant à JavaScript, donc je suis clair et simple à comprendre l'explication serait vraiment appréciée.

Nous vous remercions à l'avance

var startButton = document.getElementById("start"); 
 
var pauseButton = document.getElementById("pause"); 
 
var resetButton = document.getElementById("reset"); 
 
var minutesHTML = document.getElementById("minutes"); 
 
var secondsHTML = document.getElementById("seconds"); 
 
var seconds = 00; 
 
var minutes = 00; 
 
var myTimer = false; 
 

 

 
startButton.onclick = startTimer; 
 
pauseButton.onclick = pauseTimer; 
 
resetButton.onclick = resetTimer; 
 

 
function startTimer() { 
 
\t 
 
\t myTimer = setInterval (function() { 
 
\t \t 
 
\t \t if (seconds < 10) { 
 
\t \t \t secondsHTML.innerHTML = "0" + seconds; 
 
\t \t } 
 
\t \t if (seconds > 9) { 
 
\t \t \t secondsHTML.innerHTML = seconds; 
 
\t \t } 
 
\t \t 
 
\t \t 
 
\t \t seconds ++; 
 
\t \t 
 
\t \t if (seconds % 60 == 0) { 
 
\t \t \t minutes ++; 
 
\t \t \t seconds = 00; 
 
\t \t } 
 
\t \t 
 
\t \t if (minutes < 10) { 
 
\t \t \t minutesHTML.innerHTML = "0" + minutes; 
 
\t \t } 
 
\t \t 
 
\t \t if (minutes >= 10) { 
 
\t \t \t minutesHTML.innerHTML = minutes; 
 
\t \t } 
 
\t \t 
 
\t } \t \t 
 
\t , 1000) 
 
} 
 

 

 
function pauseTimer() { 
 
\t clearInterval(myTimer); 
 
} 
 

 
function resetTimer() { 
 
\t seconds = 00; 
 
\t minutes = 00; 
 
\t secondsHTML.innerHTML = seconds; 
 
\t minutesHTML.innerHTML = minutes; 
 
\t 
 
\t console.log(secondsHTML + minutesHTML); 
 
\t clearInterval(myTimer); 
 

 
}

body{ 
 
\t background: tomato; 
 
\t text-align: center; 
 
\t margin: auto; 
 
\t font-size: 50px; 
 
} 
 

 
h1 { 
 
\t font-size: 20px; 
 
} 
 

 
.button-container { 
 
\t display: flex; 
 
\t margin: auto; 
 
} 
 

 
button { 
 
\t text-align: center; 
 
\t border: none; 
 
\t width: 20%; 
 
\t background: #fff; 
 
\t font-size: 20px; 
 
\t margin: auto; 
 
}

<h1>TIMER</h1> 
 

 

 
<p> 
 
\t <span id="minutes">00</span> 
 
\t : 
 
\t <span id="seconds">00</span> 
 
</p> 
 

 

 
<div class="button-container"> 
 
<button id="start"><p>START</p></button> 
 
<button id = "pause"><p>PAUSE</p></button> 
 
<button id = "reset"><p>RESET</p></button> 
 
</div>

Answer 1

setInterval attend jusqu'à ce qu'un intervalle (1000ms dans votre code) est passé avant qu'il exécute votre fonction pour la première fois.

Vous pouvez appeler la fonction vous-même avant d'appeler le setInterval. De cette façon, vous recevez un appel immédiat, puis un appel toutes les secondes jusqu'à ce que l'intervalle soit annulé.

function tick() { 

    if (seconds < 10) { 
     secondsHTML.innerHTML = "0" + seconds; 
    } 
    if (seconds > 9) { 
     secondsHTML.innerHTML = seconds; 
    } 


    seconds ++; 

    if (seconds % 60 == 0) { 
     minutes ++; 
     seconds = 00; 
    } 

    if (minutes < 10) { 
     minutesHTML.innerHTML = "0" + minutes; 
    } 

    if (minutes >= 10) { 
     minutesHTML.innerHTML = minutes; 
    } 

} 

function startTimer() { 
    tick(); 
    myTimer = setInterval(tick, 1000); 
}