1

I'm trying to create a pomodoro clock, and I can't figure out why the resetClock function is going everything except clearing the interval for the clock. It is resetting the number, but the clock keeps counting down. I'd imagine I'll have this issue when trying to implement the stop clock function also. Can someone help?

var minutes = 25;
var seconds = 0;
var startSound = new Audio('./sounds/startsound.mp3')
var resetSound = new Audio('./sounds/resetclocksound.mp3')
var stopSound = new Audio('./sounds/pausesound.mp3')
var alarmSound = new Audio('/sounds//haoduken.mp3')
var minutes_interval;
var seconds_interval;


function startClock() {
  startSound.play();
  minutes = 24;
  seconds = 59;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
  document.getElementById('start-button').removeEventListener('click', startClock)
  var minutes_interval = setInterval(minutesTimer, 60000);
  var seconds_interval = setInterval(secondsTimer, 1000);

  function minutesTimer() {
    minutes = minutes - 1;
    document.getElementById('minutes').innerHTML = minutes;
  }

  function secondsTimer() {
    seconds = seconds - 1;
    document.getElementById('seconds').innerHTML = seconds;
    if (seconds <= 0) {
      seconds = 60;
    }
    if (seconds <= 0 && minutes <= 0) {
      alarmSound.play()
      clearInterval(minutes_interval);
      clearInterval(seconds_interval);
    }
  }
}

function resetClock() {
  clearInterval(seconds_interval);
  clearInterval(minutes_interval)
  resetSound.play();
  var minutes = 25;
  var seconds = 0;
  document.getElementById('minutes').innerHTML = minutes;
  document.getElementById('seconds').innerHTML = seconds;
  document.getElementById('start-button').addEventListener('click', startClock)

}
SomoKRoceS
  • 2,934
  • 2
  • 19
  • 30
C.G.
  • 73
  • 7
  • 2
    `seconds_interval` and `minutes_interval` are declared *inside* the `startClock()` function. They're not available in the other function. – Pointy Sep 28 '20 at 20:16
  • 1
    Because you're declaring local interval reference variables. – Dave Newton Sep 28 '20 at 20:17
  • Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) – Heretic Monkey Sep 28 '20 at 20:23

1 Answers1

3

The problem is on the lines where you start the interval:

   var minutes_interval = setInterval(minutesTimer, 60000);
   var seconds_interval = setInterval(secondsTimer, 1000);

the problem is simply your use of the var keyword, which creates a new local variable inside the startClock function. It does nothing to the outer (global?) variables of the same name, because those are "shadowed" by the new local variables.

As a consequence, the clearInterval calls inside resetClock are referencing the outer variables, which do not hold a timer ID.

The solution is probably very simple: just remove the var from the above two lines. You now only have one "global" minutes_interval and seconds_interval, which will be referenced by the clearInterval calls. From a quick glance, it appears that this should work OK for you, and that you only ever set these intervals up once before cancelling them. But if you wanted to use this code to set up multiple intervals simultaneously you'd have to rethink your approach.

Robin Zigmond
  • 17,805
  • 2
  • 23
  • 34
  • 1
    Implicit globals are *not* good programming practice. The variables can be explicitly declared outside the function. – Pointy Sep 28 '20 at 20:18
  • 1
    @Pointy I'm confused. Don't the 7th and 8th lines of the original code "explicitly" declare the global variables `minutes_interval` and `seconds_interval` respectively? – gforce301 Sep 28 '20 at 20:20
  • Oh! You're right; sorry. Sometimes it's easy to make assumptions about the code sitting there in the question. – Pointy Sep 28 '20 at 20:21
  • @Pointy No problem. I'm no expert but I have obtained a lot of help from your answers and comments over the years and thought I was missing something. – gforce301 Sep 28 '20 at 20:22
  • @Pointy - I totally agree, and am not recommending the use of globals, "implicit" or not. (There are no "implicit" globals in this program, and while I'm suspicious that these variables may be global, that's not totally clear - this could be inside some function or module.) – Robin Zigmond Sep 28 '20 at 20:23