停止JavaScript倒計時

Question

我想使用JavaScript做一個倒計時腳本。但我有一個問題，停止倒計時。

我創造了這個DEMO從codepen.io

在這個演示中，你可以將網頁後看到加載倒計時開始有沒有問題。但如果你在開發者控制檯中檢查後fadeOut倒計時，然後你可以看到倒數仍然countinue像-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); 
});