Java script Timer CountDown

Question

I'm creating java script count down timer and it works up to 60 seconds correctly and after that its not working.

var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

function timer() {   
    var val = document.getElementById("LabelTimer");
    if (val != null) {
        var PopUpTimeDuration = 2;  
        countdown(parseInt(PopUpTimeDuration));
    }
}

function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counterVal = document.getElementById("lblCountDown");
        var current_minutes = mins - 1
        seconds--;
        counterVal.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        var result = counterVal.innerHTML;

        if (result == "0:00") {
            clearInterval(counter);
            CloseIdlePage();
        } 
        if (seconds > 0) {
            setTimeout(tick, 1000);
        } else {
            debugger;
            if (mins >= 1) {
                countdown(mins - 1); 
            }
        }
    }
    tick();
}

When i run this program this start 1:59 and it continues up to 1:01. after that this display value rest to 1:59. (not 0:59). what i did wrong in here?

Fiddle demo is in Here: in here you can see two values are blinking each other

There is no need for current_minutes.toString() or String(seconds), both will be coerced to string by concatination with a string value (such as ":"). — RobG
– RobG, Commented Jun 10, 2014 at 5:01
You are calling setInterval(timer, 1000) so timer is called about every second, but the change of mins is done via a single call to setTimeout, so completely independent of the interval. You can cancel the interval, change the value, and start it again, or modify mins in the main part of the function when modifying seconds. — RobG
– RobG, Commented Jun 10, 2014 at 5:07

RobG · Accepted Answer · 2014-06-10 06:49:05Z

Here's how I'd implement this. Hopefully the comments are sufficient. It needs an element in the page with ID "counterDiv" to write the values to.

function quickCount(mins) {

  // Keep some values in a closure
  var el = document.getElementById('counterDiv');
  var secs = 0;

  // Helper to pad single digit numbers
  function z(n){return (n<10? '0':'') + n}

  // Keep a reference to the interval
  var timer = setInterval(function() {

    // Write the values
    el.innerHTML = mins + ':' + z(secs);

    // Decremement seconds
    --secs;

    // If finished a minute, decrement minut
    if (secs < 0) {
      if (mins) {
        --mins;
        secs = 59;

      // If finsihed minutes too, cancel timer
      } else {
        timer && clearInterval(timer);
      }
    }

  // Run at about every second
  }, 1000);
}


window.onload = function() {
  quickCount(2);
}

HTH

Abhijeet Panwar · Accepted Answer · 2014-06-10 07:31:45Z

1

        <head>

          <script type="text/javascript">
          function timer() 
          {   

               var val = document.getElementById("LabelTimer");


               if (val !== null)
                  {

                           var PopUpTimeDuration = 2;  
                           countdown(parseInt(PopUpTimeDuration));
                   }
          }

         function countdown(minutes)
         {
                var seconds = 60;
                var mins = minutes;
                function tick()
                {
                var counterVal = document.getElementById("lblCountDown");
                var current_minutes = mins - 1;
                seconds--;
var t=current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);

                counterVal.value = t;
                var result = counterVal.innerHTML;

                 if (result === "0:00")
                 {

                          CloseIdlePage();
                   } 
                 if (seconds > 0)
                 {
                      setTimeout(tick, 1000);
                 } 
                 else 
                   {
                      if (mins > 1)
                      {
                      countdown(mins - 1); 
                      }
                   }
                  }
               tick();
           }
      </script>
  </head>
   <body>
          <div>TODO write content</div>
          <input type="text" id="LabelTimer" value="yooo">
           <input type="text" id="lblCountDown">
          <input type="button" value="try" onclick="timer();" />
   </body>

edited Jun 10, 2014 at 7:31

answered Jun 10, 2014 at 6:12

Abhijeet Panwar

1,8753 gold badges27 silver badges49 bronze badges

3 Comments

Abhijeet Panwar Over a year ago

Did it solve your problem ? I have just changed your if(seconds>=0) condition and else {debugger;if (mins >= 1) {countdown(mins - 1); }} condition, minute changes.

Abhijeet Panwar Over a year ago

Your code was not working as you said, for me it was showing from 1:59 to -1:59 , so fixed that.

Abhijeet Panwar Over a year ago

@DevT I don't exactly know that how fiidle works and why it does's display anything when i put my code there, But what you did wrong is: that you have set a setinterval for timer, you don't need that , as you already have set a timout for tick which is your function which decreases time, as your function displays you 1.01 , 1minute is done and your set interval function again calls tick function whit tick(2) so again it starts from 2.00 to 1.00.. so it continues.So remove your setinterval funtion for timer function , and clear also from your first if condition .

DevT · Accepted Answer · 2014-06-23 07:18:20Z

I resolved this as follows:

var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
var IsFunctionCalled = false;
function timer() {   
    var val = document.getElementById("LabelTimer");
    if (val != null) {
        var PopUpTimeDuration = 2; 
         if (IsFunctionCalled == false) {
            IsFunctionCalled = true 
            countdown(parseInt(PopUpTimeDuration));
        }

    }
}

function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counterVal = document.getElementById("lblCountDown");
        var current_minutes = mins - 1
        seconds--;
        counterVal.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        var result = counterVal.innerHTML;

        if (result == "0:00") {
            clearInterval(counter);
            CloseIdlePage();
        } 
        if (seconds > 0) {
           setTimeout(tick, 1000);
          // tick()
        } else {
            if (mins >= 1) {
                countdown(mins - 1); 
            }
        }
    }
    tick();
}

See here for Demo

Collectives™ on Stack Overflow

Java script Timer CountDown

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related