In Javascript how do I use setInterval and clearInterval to prevent multiple timers when a new time is set

Question

I have a countdown timer that the user can use to launch a YouTube video. When the timer hits "0" clearInterval() stops the countdown and the YouTube video launches. However, if the user decides to change the time, no matter what I do multiple timers are created.

How do I get the old timer to delete when a new timer is created?

example here: http://js.do/code/130794

(set a timer then set a new timer, the timers build up instead of replacing the original timer)

I have spent a few days on this issue, any ideas would be much appreciated

function countdown(){

 var today = new Date();

 // Goes and gets the alarm times from selection boxes
 var slhrss = document.getElementById('selectyhrs');
 var slhrs = slhrss.options[slhrss.selectedIndex].value;
 var slminss = document.getElementById('selectymins');
 var slmins = slminss.options[slminss.selectedIndex].value;
 var slsecss = document.getElementById('selectysecs');
 var slsecs = slsecss.options[slsecss.selectedIndex].value;

 // Assumes if the user selects before the actual time they want the alarm for tomorrow
 if (today.getHours() > slhrs){
     var target_date = new Date(today.setDate(today.getDate()+1));
     target_date.setHours( slhrs,slmins,slsecs,0 );
 }

 //Assumes if the user selects after the actual time they wan the alarm for today
 else{
     var target_date = new Date();
     target_date.setHours( slhrs,slmins,slsecs,0 );
 }

 // variables for time units
 var hours, minutes, seconds;

 // get tag element
 var countdown = document.getElementById('countdown');

 // update the tag with id "countdown" every 1 second
 var iv = setInterval(function () {

      // find the amount of "seconds" between now and target
      var current_date = new Date().getTime();
      var seconds_left = (target_date - current_date) / 1000;

      if (seconds_left < 0){
          clearInterval(iv);
          return;
      }

      // do some time calculations
      hours = parseInt(seconds_left / 3600);
      seconds_left = seconds_left % 3600;
      minutes = parseInt(seconds_left / 60);
      seconds = parseInt(seconds_left % 60);

      // format countdown string + set tag value
      countdown.innerHTML = '<h2>Time remaining</h2>' + '<span class="hours">' + hours + ' <b>Hours</b></span> <span class="minutes">' + minutes + ' <b>Minutes</b></span> <span class="seconds">' + seconds + ' <b>Seconds</b></span>';  
      if(hours + minutes + seconds == 0){
          document.getElementById("video").innerHTML = '<iframe src="http://www.youtube.com/embed/QH2-TGUlwu4?autoplay=1" width="960" height="447" frameborder="0" allowfullscreen></iframe>'
      }
 }, 1000);
}

The lack of indentation makes it hard to follow the scope of your different arguments (Which is a puzzle in itself in javascript, could you edit in some indentation?) — Bart Enkelaar, Jan 12 '17 at 17:01

score 1 · Answer 1 · answered Jan 12 '17 at 17:06

1

function settimer(a,b,c){
  try{
    clearInterval(window[a]);
  }catch(e){};
   window[a]=setInterval(b,c);
  }

Use like this:

var timer1;
settimer("timer1",function(){},1000);
//you can still do:
clearInterval(timer1);

answered Jan 12 '17 at 17:06

Jonas Wilms

132,000
20
149
151

score 1 · Accepted Answer · answered Jan 12 '17 at 17:08

1

The problem is that you're only clearing your interval when the timer runs out, not when you're creating a new timer.

If you make iv a globally scoped variable and call clearInterval on it in countdown before creating the new timer, it should work for you.

I think it's fixed here: http://js.do/benkelaar/clearinterval-and-setinterval-fixed

answered Jan 12 '17 at 17:08

Bart Enkelaar

695
9
21

Oh my goodness that was simple! I did make iv global at one point but had didnt put clearInterval(iv) in the right place! Many thanks – user1721230 Jan 12 '17 at 17:16
No problem, I have to remark that using globally scoped variables is not necessarily a good idea, this answer has a good rundown of why: http://stackoverflow.com/a/5786899/446496 - Have a nice day! – Bart Enkelaar Jan 12 '17 at 17:19
For some reason it doesn't work when I run it locally, i get "Uncaught ReferenceError: iv is not defined"? – user1721230 Jan 12 '17 at 17:23
Sorry I just noticed var iv = 0; before the function...thanks again – user1721230 Jan 12 '17 at 17:25
1

Have you added "var iv = 0" above the start of your countdown definition? Edit: That yes :-) – Bart Enkelaar Jan 12 '17 at 17:26

In Javascript how do I use setInterval and clearInterval to prevent multiple timers when a new time is set

2 Answers2