В Javascript как использовать setInterval и clearInterval для предотвращения множества таймеров при установке нового времени

Question

У меня есть таймер обратного отсчета, который пользователь может использовать для запуска видео YouTube. Когда таймер достигает «0», clearInterval() останавливает обратный отсчет и запускает видеоролик YouTube. Однако, если пользователь решает изменить время, независимо от того, что я делаю, несколько таймеров создаются.

Как мне удалить старый таймер при создании нового таймера?

пример здесь: http://js.do/code/130794

(установить таймер затем установить новый таймер, таймеры строить вместо того, чтобы заменить оригинальный таймер)

Я провел несколько дней по этому вопросу, какие идеи будут высоко ценится

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

Answer 1

Проблема в том, что вы освобождаете свой интервал только в том случае, если таймер заканчивается, а не при создании нового таймера.

Если вы сделаете iv переменной с глобальным охватом и вызовите clearInterval на ней в обратном отсчете перед созданием нового таймера, он должен работать на вас.

Я думаю, что здесь исправлено: http://js.do/benkelaar/clearinterval-and-setinterval-fixed

Answer 2

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

Использование так:

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