проблема с счетчиком setInterval

Question

У меня есть этот маленький скрипт.Моя проблема заключается в том, что, когда я нажимаю кнопку «Пуск», счет начинается нормально, но если я нажимаю на него снова, счетчик начинает действовать странно.Как избежать этой проблемы и запускать новый счетчик при каждом нажатии кнопки?

$(".c1").click(function(e){
let a = 0;
setInterval(function(){ $("#timer").text(a);  a++; }, 500);

})

.card{ font-size:25px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<div class="btn c1"> Start Timer</div>
<br>

<br>
<span id="timer"  class="card">0</span>

Answer 1

каждый раз, когда вы нажимаете, вы запускаете еще один setInterval

решение

1. , когда он должен считать с начала - используйте clearInterval https://stackoverflow.com/a/5978560/3046335

2. , чтобы отключить действия, если мы хотим запустить счетчик один раз - используйте .attr("disabled", true);

   //1
       var time = 0
       $(".c1").click(function(e){
       clearInterval(time); // stop if runn interval
       let a = 0;
       time = setInterval(function(){ $("#timer").text(a);  a++; }, 500);
   
       })
   
   //2
       $(".c2").click(function(e){
       let a = 0;
       setInterval(function(){ $("#timer2").text(a);  a++; }, 500);
       $(".c2").attr("disabled", true);
       })

       .card{ font-size:25px; }

       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
           <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
   
   
       <div class="btn c1"> Start Timer 1</div>
       <br>
   
       <br>
       <span id="timer"  class="card">0</span>
   
       <br>
       <br>
       <div class="btn c2"> Start Timer 2</div>
       <br>
   
       <br>
       <span id="timer2"  class="card">0</span>

Answer 2

Вы должны сбросить интервал перед началом нового

let interval;
$(".c1").click(function(e) {
  let a = 0;
  if(interval) clearTimeout(interval);
  interval = setInterval(function(){ $("#timer").text(a);  a++; }, 500);
})

.card{ font-size:25px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<div class="btn c1"> Start Timer</div>
<br>

<br>
<span id="timer"  class="card">0</span>

Answer 3

Вы должны очистить интервал перед началом нового.Иначе, две вещи (или больше) увеличиваются a.

Чтобы очистить интервал, просто вызовите clearInterval по результату setInterval.

let interval;

$(".c1").click(function(e){
  let a = 0;
  clearInterval(interval);
  interval = setInterval(function(){ $("#timer").text(a);  a++; }, 500);

});

.card{ font-size:25px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<div class="btn c1"> Start Timer</div>
<br>

<br>
<span id="timer"  class="card">0</span>

Answer 4

«Действует странно» потому, что вы запускаете секунду , отдельный таймер, так что теперь оба работают, каждый помещая свою собственную копию a в элемент.Вам необходимо запомнить дескриптор предыдущего таймера (возвращаемое значение setInterval) и отменить его (через clearInterval):

let handle = 0;
$(".c1").click(function(e) {
  let a = 0;
  clearInterval(handle)
  handle = setInterval(function() {
    $("#timer").text(a);
    a++;
  }, 500);

})

.card {
  font-size: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">


<div class="btn c1"> Start Timer</div>
<br>

<br>
<span id="timer" class="card">0</span>

Примечание. Я использовал значение 0 в качестве начального значения handle, а затем с радостью назвал clearIntervalтаймер уже работал или нет.0 является недопустимым значением дескриптора, а clearInterval (и clearTimeout) игнорируют недопустимые значения дескриптора, поэтому вы можете сделать это безопасно.Но добавьте if, если хотите.