Javascript 函数在单击按钮之前激活

Javascript Function activates before button is clicked

本文关键字：激活 按钮 单击 函数 Javascript      更新时间：2023-09-26

如果单击按钮时满足要求，它将显示倒数计时器。问题是它甚至在您单击按钮之前就会显示倒数计时器。我不确定我忽略了什么。

 <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>
您需要

将countdownTimer变量移动到timer()函数中。

尝试将timer()的最后一行更改为如下所示：

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

并移除setInterval行。

一般来说，setTimeout比setInterval更受欢迎，因为它不需要托管状态（在您的示例中countdownTimer），并且更加灵活。

另请注意，在 setTimeout('timer()', 1000) 中传递字符串已经过时了，只需传递一个函数：setTimeout(timer, ...) 。

此行

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

将在页面加载后以及单击按钮时执行 1 秒，这将调用 display_timer 函数。

>你在setInterval函数中调用了它，所以它会立即启动，因为setInterval函数在页面加载后运行，而不是在点击时运行，setInterval使用你的函数

相关文章：