javascript - 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

“表现得很奇怪”是因为您正在启动一个第二个单独的计时器，所以现在两个计时器都在运行，每个计时器都将自己的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。