單擊按鈕之前激活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

您需要將countdownTimer變量移到您的timer()函數中。

Answer 2

這條線

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

將在頁面加載后1秒鍾執行一次，並在單擊按鈕時執行，這將調用display_timer函數。

Answer 3

您已經在setInterval函數中調用了它，所以它將立即啟動，因為setInterval函數在頁面加載后運行，而不是在單擊時運行，並且setInterval使用您的函數

Answer 4

嘗試將timer()的最后幾行更改如下：

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

並刪除setInterval行。

一般來說， setTimeout比setInterval更可取，因為它不需要托管狀態（在您的示例中為countdownTimer ），並且靈活得多。

還要注意，像setTimeout('timer()', 1000)那樣傳遞字符串已過時，只需傳遞一個函數： setTimeout(timer, ...) 。