javascript - setInterval 倒计时太快

Question

有人可以帮我吗，我想知道如何做到每次点击时倒计时不会变快？我假设有明确的间隔但不确定我需要放什么。谢谢

var cD = 100;

function countDown() {
    if (cD > 0) {
        cD -= 1;
        $(".countdown").html(cD +"s");
    }
}

$(".countdown-trigger").click(function(){
    cD = 100;

    setInterval(countDown, 10);
});

.countdown-trigger {
    height: 50px;
    width: 100px;
    background-color: blue;
}

.countdown {
    font-family: "Teko", sans-serif;
    font-size: 100px;
    line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown">
    </div>
    <div class="countdown-trigger">
    </div>

Answer 1

问题是因为您永远不会在每次连续点击时清除之前的超时，因此在点击 3 次后，您有三个计时器每 10 毫秒递减一次值。

当 cD 命中 0 时修复此调用 clearTimeout()。另请注意，您需要一种机制来防止在前一个间隔仍在运行时启动多个间隔，否则您将遇到同样的问题。为此，您可以使用 bool 标志。试试这个:

var cD = 100, interval, running = false;

function countDown() {
  if (cD > 0) {
    cD -= 1;
    $(".countdown").html(('00' + cD).slice(-2) + "s");
  } else {
    clearInterval(interval);
    running = false;
  }
}

$(".countdown-trigger").click(function() {
  if (running)
    return;
    
  cD = 100;
  running = true;
  interval = setInterval(countDown, 10);
});

.countdown-trigger {
  height: 50px;
  width: 100px;
  background-color: blue;
}

.countdown {
  font-family: "Teko", sans-serif;
  font-size: 100px;
  line-height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countdown"></div>
<div class="countdown-trigger"></div>