有人可以帮我吗,我想知道如何做到每次点击时倒计时不会变快?我假设有明确的间隔但不确定我需要放什么。谢谢
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>
最佳答案
问题是因为您永远不会在每次连续点击时清除之前的超时,因此在点击 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>
关于javascript - setInterval 倒计时太快,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43723355/