Stopping timer not working:

Question

I have THIS timer in my project. When it runs out, it shows a Time Up screen, which works fine. But when the player is Game Over, i show the Game Over screen, but the timer keeps running and when it hits 00:00 then it switches to the Time Up screen.

How can i make this timer stop counting down and set to 00:00 again?

I tried adding a function like this:

CountDownTimer.prototype.stop = function() {
  diff = 0;
  this.running = false;    
};

I also tried to change the innerHTML but its obvious that its just changing the numbers without stopping the timer and after a second it will show the count down again... I don't know what to call.

//Crazy Timer function start
function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

window.onload = function () {
    var display = document.querySelector('#countDown'),
        timer = new CountDownTimer(timerValue),
        timeObj = CountDownTimer.parse(timerValue);

    format(timeObj.minutes, timeObj.seconds);

    timer.onTick(format).onTick(checkTime);

    document.querySelector('#startBtn').addEventListener('click', function () {
        timer.start();
    });

    function format(minutes, seconds) {
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        display.textContent = minutes + ':' + seconds;
    }

    function checkTime(){
    if(this.expired()) {
        timeUp();
        document.querySelector('#startBtn').addEventListener('click', function () {
        timer.start();
    });
    }
    }
};

When the timer's up, have you tried to check if the game was over before displaying the time up screen ? — FrancoisBaveye
//Crazy Timer function end how choice name! That's the root of the problem — Kirill Slatin
I would suggest using setInterval to be able to cancel independent timers — Kirill Slatin
i just updated the post. @Hero-Luin yes i tried to declare a variable called gameStop = 0; and then changed it with the gameOver function to 1 but in the timer function where i call the TimeUp(); function it didnt work by using an if statement. — 00Gheist00

Tom Jardine-McNamara Tom Jardine-McNamara · Accepted Answer · 2015-05-12T14:01:52

Instead of recursively calling setTimeout, try setInterval instead. You could then store a reference to the timer:

this.timer = setInterval(functionToRunAtInterval, this.granularity);

and kill it when the game finishes::

clearInterval(this.timer)

(see MDN's docs for more info on setInterval)

Stopping timer not working:

3 Answers