Stop javascript countdown

Question

I am trying to make a countdown script using javascript. But i have one problem with stoped count down.

I have created this DEMO from codepen.io

In this demo you can see after page load the countdown will starting there is not have problem. But if you check it in developer console after fadeOut countdown then you can see the countdown still countinue like -1, -2, -3, ...

My question is how can i stop countdown after 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

You have to use clearInterval() function to stop the timer in fadeOut callback:

clearInterval(timer);

See fadeOut() complete option.

Your updated example:

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