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。

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

每次单击都会启动另一个 setInterval

解决方案

必须从头算起时-使用clearInterval https://stackoverflow.com/a/5978560/3046335

如果要一次启动计数器，则禁用操作-使用.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>

setInterval计数器问题

4 个答案: