CODEWITHSUNDEEP
javascripttimeronclicksetintervalclearinterval
user1721230
user1721230

Reputation: 315

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

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);
}

Upvotes: 0

Views: 893

Answers (2)

Bart Enkelaar
Bart Enkelaar

Reputation: 694

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

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138267

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

Upvotes: 1

Related Questions