comment empêcher la fonction de s'exécuter à nouveau jusqu'à ce qu'un certain temps se soit écoulé ?

Question

J'ai une fonction qui s'exécute lorsque vous cliquez sur un bouton. Cependant, je ne veux pas que la fonction s'exécute à nouveau avant qu'un certain temps se soit écoulé. Par exemple, le compte à rebours est terminé. Si l'on clique à nouveau sur le bouton, la fonction ne doit pas s'exécuter.

$("start").on('click', function() {
  var myTimer;

  function clock() {
    myTimer = setInterval(myClock, 1000);
    var c = 5;

    function myClock() {
      document.getElementById("demo").innerHTML = --c;
      if (c == 0) {
        clearInterval(myTimer);
        alert("Reached zero");
      }
    }
  }
});

Answer 1

Tout d'abord, retirez le clock() fonction. Elle ne sert à rien compte tenu de la structure de votre code. Deuxièmement, si vous utilisez un framework tel que jQuery, soyez cohérent avec lui.

Pour résoudre le problème actuel, stockez un indicateur booléen pour déterminer si le temps est en cours ou non.

let $demo = $('#demo');

$("#start").on('click', function() {
  let $button = $(this);
  if ($button.data('running'))
    return; // do nothing

  $button.data('running', true);
  let myTimer = setInterval(myClock, 1000);
  let c = 5;
  $demo.html(c);

  function myClock() {
    $("#demo").html(--c);
    if (c == 0) {
      $button.data('running', false);
      clearInterval(myTimer);
      console.log("Reached zero");
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">Start</button>
<div id="demo"></div>