CODEWITHSUNDEEP
javascripttimer
DevT
DevT

Reputation: 4933

Java script Timer CountDown

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

Upvotes: 0

Views: 2055

Answers (3)

DevT
DevT

Reputation: 4933

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

Upvotes: 0

Abhijeet Panwar
Abhijeet Panwar

Reputation: 1867

        <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>

Upvotes: 1

RobG
RobG

Reputation: 147403

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

Upvotes: 1

Related Questions