カウントダウンへのドロップダウン選択が常に変化する

Question

タイトルが貧弱なため、申し訳ありません。発生している問題が

：JSFiddle

を更新せずにドロップダウン（次々と）から複数の値を選択するたびに、カウントダウンは常に互いの間で点滅します。

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

たびRun()は、関数は、新しいtimer変数を作成し、ドロップダウンchangeに呼ばれています。 （JavaScriptの変数には、機能レベルのスコープがあります。範囲外になったらガベージコレクションされます）。したがって、コード内で、clearInterval(timer)は、ドロップダウンを変更すると、timerがscopeを超えているため、正常に呼び出されることはありません（ログは未定義です）。

のでtimerをグローバルにし、以下のようにすべてのchangeにclearIntervalを呼び出す：

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>