javascript - 停止 JavaScript 倒计时

Question

这个问题已经有答案了:

Stop setInterval (6 个回答)

已关闭 7 年前。

我正在尝试使用 javascript 制作倒计时脚本。但我有一个停止倒计时的问题。

我创建了这个 DEMO 来自 codepen.io

在此演示中，您可以看到页面加载后倒计时将开始，没有问题。但是，如果您在淡出倒计时后在开发者控制台中检查它，那么您可以看到倒计时仍然像 -1、-2、-3、...

我的问题是如何在淡出后停止倒计时？

JS

$(document).ready(function() {
   var sec = 5
   var timer = setInterval(function() {
      $("#mdtimer span").text(sec--);
      if (sec == 0) {
         $("#makingdifferenttimer").delay(1000).fadeIn(1000);
         $("#mdtimer").hide(1000).fadeOut(fast);
      }
   }, 1000);
});

Answer 1

您必须使用 clearInterval() 函数在 fadeOut 回调中停止计时器:

clearInterval(timer);

参见fadeOut() 完整选项。

您更新的示例:

$(document).ready(function() {
   var sec = 5
   var timer = setInterval(function() {
      $("#mdtimer span").text(sec--);
      if (sec == 0) {
         $("#makingdifferenttimer").delay(1000).fadeIn(1000);
         $("#mdtimer").hide(1000).fadeOut(500, function() {
            clearInterval(timer);
         });
      }
   }, 1000);
});