代码之家 › 专栏 › 技术社区 › Supun Abesekara

setInterval反问题

setinterval javascript

Supun Abesekara · 技术社区 · 7 年前

我有这个小剧本。我的问题是,当我点击开始按钮,计数开始正常,但如果我再次点击它,计数器开始奇怪的行为。如何避免此问题并在每次单击按钮时启动新计数器?

$(".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>

4 回复 | 直到 7 年前

T.J. Crowder 7 年前

“行为怪异”是因为你开始第二 ,独立的计时器,所以现在两个都在运行,每个都放置自己的 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 我很高兴打电话给你 清除间隔 计时器是否已经运行。 清除间隔 clearTimeout )忽略无效的句柄值,这样您就可以安全地这样做。但是加上 if 如果你愿意的话。

ArtemSky 7 年前

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>

sjahan 7 年前

在开始一个新的间隔之前,你必须清除间隔。否则,有两件事(或更多)在增加 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>

DEV-Jacol 7 年前

设置间隔

解决方案

当它必须从头开始计数时-使用 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>