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次之后，您将拥有三个计时器，每10ms都会减小该值。

要解决此问题，请在cD达到0时调用clearTimeout() 。 还要注意，您将需要一种机制来防止在前一个间隔仍在运行时启动多个间隔，否则您将遇到相同的问题。 为此，您可以使用布尔标志。 尝试这个：

 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> 

Answer 2

 var cD = 100; var myOtherVar; function countDown() { if (cD > 0) { cD -= 1; $(".countdown").html(cD +"s"); } else { clearInterval(myOtherVar); } } $(".countdown-trigger").click(function(){ cD = 100; myOtherVar = 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> 

你是对的。 您只需要清除间隔即可。 每次您单击该区域时，它都会设置另一组事件，每10ms发生一次，这就是为什么它会越来越快的原因。