Функция Javascript активируется до нажатия кнопки

Question

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

<input id="upgrade" type="button" value="Upgrade" onclick="timer();" /> 
<br><br><br><br> 
<p id="countdown_timer"></p> 

<script> 
    function display_timer(){ 
     document.getElementById("countdown_timer").innerHTML = "<span id='countdown' class='timer'></span>"; 
    } 
</script> 

<script> 
    var currently_upgrading = 0; 
    var current_ore   = 398; 
    var current_crystal  = 398; 
    var upgradeTime = 172801; 
    var seconds  = upgradeTime; 

    function timer() { 
     if(currently_upgrading == 1){alert('You are already upgrading a module.');return;} 
     if(current_ore <= 299){alert('You need more ore.');return;} 
     if(current_crystal <= 299){alert('You need more crystal.');return;} 

     display_timer(); 
     var days  = Math.floor(seconds/24/60/60); 
     var hoursLeft = Math.floor((seconds) - (days*86400)); 
     var hours  = Math.floor(hoursLeft/3600); 
     var minutesLeft = Math.floor((hoursLeft) - (hours*3600)); 
     var minutes  = Math.floor(minutesLeft/60); 
     var remainingSeconds = seconds % 60; 

     if (remainingSeconds < 10) { 
      remainingSeconds = "0" + remainingSeconds; 
     } 
     document.getElementById('countdown').innerHTML = days + ":" + hours + ":" + minutes + ":" + remainingSeconds; 
     if (seconds == 0) { 
      clearInterval(countdownTimer); 
      document.getElementById('countdown').innerHTML = "Completed"; 
     } else { 
      seconds--; 
     } 
    } 
    var countdownTimer = setInterval('timer()', 1000); 
</script> 

Answer 1

Попробуйте изменить последние строки timer() быть похожим на это:

if (seconds == 0) { 
     document.getElementById('countdown').innerHTML = "Completed"; 
    } else { 
     seconds--; 
     setTimeout(timer, 1000); 
    } 

и удалить setInterval линию.

Говоря в целом, setTimeout гораздо предпочтительнее, чем setInterval, поскольку он не требует управляемого состояния (countdownTimer в вашем примере) и является гораздо более гибким.

Также обратите внимание, что передача строки, как в setTimeout('timer()', 1000), устарела, просто передайте функцию: setTimeout(timer, ...).

Answer 2

Эта линия

var countdownTimer = setInterval('timer()', 1000); 

будет выполняться через 1 секунду после загрузки страницы, а также на кнопку мыши, и это вызывает функцию display_timer.

Answer 3

вы назвали его в setInterval функции, поэтому она будет сразу же начинается, потому что setInterval функция запускается после загрузки страницы, а не по щелчку и setInterval использует вашу функцию

Answer 4

Вы должны переместить countdownTimer переменные в вашу timer() функции.