Drop-Down-Auswahl zum Countdown - ändert sich ständig

Question

Entschuldigung für den schlechten Titel, nicht wirklich sicher, wie man es titelt.

jedoch das Problem, dass auftritt: JSFiddle ohne erfrischende

Wenn mehrere Werte aus dem Dropdown-Auswahl (nacheinander) werden die Countdowns ständig untereinander blinken.

HTML:

<div id="countdown">Please select a value</div> 
<select id="Dropdown" onchange="Run()"> 
    <option value="50">Nothing</option> 
    <option value="1">Re:Zero kara Hajimeru Isekai Seikatsu</option> 
    <option value="2">Kabaneri of the Iron Fortress</option> 
    <option value="3">Boku no Hero Academia</option> 
</select> 

JS:

function Run() { 
    var _s = document.getElementById("Dropdown"); 
    var s = _s.options[_s.selectedIndex].value; 

    if (s == 50) { 
    var end = new Date('02/25/2016 00:00 AM'); 
    } else if (s == 3) { 
    var end = new Date('05/22/2016 6:30 PM'); 
    } else if (s == 2) { 
    var end = new Date('05/20/2016 9:00 AM'); 
    } else if (s == 1) { 
    var end = new Date('05/23/2016 3:00 AM') 
    } 


    var _second = 1000; 
    var _minute = _second * 60; 
    var _hour = _minute * 60; 
    var _day = _hour * 24; 
    var timer; 

    function showRemaining() { 
    var now = new Date(); 
    var distance = end - now; 

    if (distance < 0) { 

     clearInterval(timer); 
     document.getElementById('countdown').innerHTML = "It's out already ;)"; 

     return; 
    } 

    var days = Math.floor(distance/_day); 
    var hours = Math.floor((distance % _day)/_hour); 
    var minutes = Math.floor((distance % _hour)/_minute); 
    var seconds = Math.floor((distance % _minute)/_second); 

    document.getElementById('countdown').innerHTML = days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, ' + seconds + ' seconds.'; 

    } 

    timer = setInterval(showRemaining, 1000); 

    if (s == 50) { 
    document.getElementById('countdown').innerHTML = "Don't select nothing ;)" 
end; 
    } 
} 

Answer 1

Jedes Mal Run() auf Drop-Down genannt change, erstellt die Funktion eine neue timer Variable. (Variablen in JavaScript haben Funktionsebene Umfang. Sie sind Müll gesammelt, wenn sie außerhalb des Geltungsbereichs sind). Also, in Ihrem Code, clearInterval(timer) würde nie erfolgreich aufgerufen werden (Protokoll wird undefined angezeigt) seit timer ist aus scope, wenn Sie das Dropdown ändern.

So machen die timer global und rufen clearInterval auf jedem change wie unten:

var timers; // Make a global timer variable 
 

 
function Run() { 
 
    console.log(timers); // Observe it holds the previous timer value 
 
    clearInterval(timers); // clear interval here everytime 
 

 

 

 
    var _s = document.getElementById("Dropdown"); 
 
    var s = _s.options[_s.selectedIndex].value; 
 

 
    if (s == 50) { 
 
    var end = new Date('02/25/2016 00:00 AM'); 
 
    } else if (s == 3) { 
 
    var end = new Date('05/22/2016 6:30 PM'); 
 
    } else if (s == 2) { 
 
    var end = new Date('05/20/2016 9:00 AM'); 
 
    } else if (s == 1) { 
 
    var end = new Date('05/23/2016 3:00 AM') 
 
    } 
 

 

 
    var _second = 1000; 
 
    var _minute = _second * 60; 
 
    var _hour = _minute * 60; 
 
    var _day = _hour * 24; 
 

 

 
    function showRemaining() { 
 
    var now = new Date(); 
 
    var distance = end - now; 
 

 
    if (distance < 0) { 
 

 
     clearInterval(timers); 
 
     document.getElementById('countdown').innerHTML = "It's out already ;)"; 
 

 
     return; 
 
    } 
 

 
    var days = Math.floor(distance/_day); 
 
    var hours = Math.floor((distance % _day)/_hour); 
 
    var minutes = Math.floor((distance % _hour)/_minute); 
 
    var seconds = Math.floor((distance % _minute)/_second); 
 

 
    document.getElementById('countdown').innerHTML = days + ' days, ' + hours + ' hours, ' + minutes + ' minutes, ' + seconds + ' seconds.'; 
 

 
    } 
 

 
    timers = setInterval(showRemaining, 1000); 
 
    console.log(timers); // observe the value set here 
 

 
    if (s == 50) { 
 
    document.getElementById('countdown').innerHTML = "Don't select nothing ;)" 
 
    end; 
 
    } 
 
}

<div id="countdown">Please select a value</div> 
 
<select id="Dropdown" onchange="Run()"> 
 
    <option value="50">Nothing</option> 
 
    <option value="1">Re:Zero kara Hajimeru Isekai Seikatsu</option> 
 
    <option value="2">Kabaneri of the Iron Fortress</option> 
 
    <option value="3">Boku no Hero Academia</option> 
 
</select>