停止javascript倒计时[重复]

Question

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

我从 codepen.io 创建了这个 DEMO

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

我的问题是如何在 fadeOut 之后停止倒计时？

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()complete 选项。

您更新的示例：

$(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);
});