CODEWITHSUNDEEP
javascripthtmlcss
Dino Excel
Dino Excel

Reputation: 384

countdown timer stops at zero i want it to reset

I am trying to figure out a way to make my countdown timer restart at 25 all over again when it reaches 0. I dont know what I am getting wrong but it wont work.

Javascript

window.onload = function() {
   startCountDown(25, 1000, myFunction);
}

function startCountDown(i, p, f) {
   var pause = p;
   var fn = f;
   var countDownObj = document.getElementById("countDown");

   countDownObj.count = function(i) {
      //write out count
      countDownObj.innerHTML = i;
      if (i == 0) {
      //execute function
      fn();
      //stop
      return;
   }
   setTimeout(function() {
      // repeat
      countDownObj.count(i - 1);
      },
      pause  
      );
   }
   //set it going
   countDownObj.count(i);
}

function myFunction(){};
</script>

HTML

    <div id="countDown"></div>

Upvotes: 0

Views: 3951

Answers (4)

RobG
RobG

Reputation: 147363

The main reason for using setInterval for a timer that runs continuously is to adjust the interval so that it updates as closely as possible to increments of the system clock, usually 1 second but maybe longer. In this case, that doesn't seem to be necessary, so just use setInterval.

Below is a function that doesn't add non–standard properties to the element, it could be called using a function expression from window.onload, so avoid global variables altogether (not that there is much point in that, but some like to minimise them).

var runTimer = (function() {

  var element, count = 0;

  return function(i, p, f) {
    element = document.getElementById('countDown');

    setInterval(function() {
      element.innerHTML = i - (count % i);
      if (count && !(count % i)) {
        f();
      }
      count++;  
    }, p);
  }
}());

function foo() {
  console.log('foo');
}

window.onload = function() {
  runTimer(25, 1000, foo);
}

Upvotes: 1

DolDurma
DolDurma

Reputation: 17289

in @Muthu Kumaran code is not showing zero after countdown 1 . you can update to this:

if (i < 0) {
//  execute function
    fn();
    startCountDown(10, 1000, myFunction);
    //  stop
    return;
}

Upvotes: 1

Edward
Edward

Reputation: 1914

I don't see you resetting the counter. When your counter goes down to 0, it executes the function and return. Instead, you want to execute the function -> reset the counter -> return

You can do this by simply adding i = 25 under fn() : 

function startCountDown(i, p, f) {
var pause = p;
var fn = f;
var countDownObj = document.getElementById("countDown");

countDownObj.count = function(i) {
//  write out count
countDownObj.innerHTML = i;
if (i == 0) {
//  execute function
fn();
i = 25;
//  stop
return;
}
setTimeout(function() {
//  repeat
countDownObj.count(i - 1);
},
pause  
);
}
//  set it going

Upvotes: 1

Muthu Kumaran
Muthu Kumaran

Reputation: 17900

try this, timer restarts after 0

http://jsfiddle.net/GdkAH/1/

Full code:

window.onload = function() {
startCountDown(25, 1000, myFunction);
}

function startCountDown(i, p, f) {
    var pause = p;
    var fn = f;
    var countDownObj = document.getElementById("countDown");

    countDownObj.count = function(i) {
    //  write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    //  execute function
        fn();
        startCountDown(25, 1000, myFunction);
        //  stop
        return;
    }
    setTimeout(function() {
            //  repeat
            countDownObj.count(i - 1);
    }, pause);
}
//  set it going
countDownObj.count(i);
}

function myFunction(){};

​

Upvotes: 1

Related Questions