J'ai besoin d'afficher un compte à rebours commençant par 10. Chaque fois que je clique sur un bouton pendant qu'il est en cours d'exécution, le compteur se réinitialise à nouveau. La fonction ci-dessous fonctionne bien, mais chaque fois que je clique sur le bouton au milieu du comptage, le compteur de la minuterie avance rapidement et s'affiche trop rapidement.

var timeleft = 10;
var downloadTimer = setInterval(function() {
  document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
  timeleft -= 1;
  if (timeleft <= 0) {
    clearInterval(downloadTimer);
  }
}, 1000);

function fn_start() {
  var timeleft = 10;
  var downloadTimer = setInterval(function() {
    document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
    timeleft -= 1;
    if (timeleft <= 0) {
      clearInterval(downloadTimer);
    }
  }, 1000);
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<div id="countdown"></div>
<button type='button' id='startbtn' onclick="fn_start()">Start</button>
0
Abhishek Chattejee 31 janv. 2020 à 09:31

1 réponse

Meilleure réponse

Vous devez effacer l'intervalle à chaque fois que vous appelez votre fonction.

<div id="countdown"></div>
<button type='button' id='startbtn' onclick="fn_start()">Start</button>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  var downloadTimer; // global var
  
  function fn_start() {
    var timeleft = 10;
    
    clearInterval(downloadTimer);
    
    downloadTimer = setInterval(function() {
      document.getElementById("countdown").innerHTML = timeleft + " seconds remaining";
      timeleft -= 1;
      if (timeleft <= 0) {
        clearInterval(downloadTimer);
      }
    }, 1000);
  }
  // If you don't need to show the timer first, comment this line
  fn_start();
</script>
1
mplungjan 31 janv. 2020 à 06:47