setTimeout/setInterval失效：生日倒计时停滞问题求助

你的倒计时停滞的核心原因是没有动态更新剩余时间，同时定时器使用方式错误，以下是具体问题和修复代码：

问题分析 #

1. timeLeft仅在页面加载时计算一次，之后不会随时间推移重新计算，导致每次调用getTime都用同一个固定值，自然不会递减。
2. setTimeout只会执行一次getTime函数，无法实现每秒更新的效果，应该用setInterval或者在函数内部递归调用setTimeout。
3. 最后调用getTime时的参数传递完全错误：currentTime是一个Date对象，不是函数，不能写成currentTime(current time)，而且你的getTime函数也没有定义接收参数的逻辑。

修复后的代码 #

HTML部分（无需修改）

<div class="countdownholder">
    <div class="content">
        <div class="contentHeader">
            <h3>Days until my 22nd birthday</h3>
        </div>
        <div class="countdownHolder">
            <div class="time1" id="timeDay"><p></p></div>
            <div class="time1" id="timeHours"></div>
            <div class="time1" id="timeMinutes"></div>
            <div class="time1" id="timeSeconds"></div>
        </div>
    </div>
</div>
<script src="js/main.js"></script>

JavaScript部分

var birthdayDate = new Date('Jan 04, 2024 00:01:00');
var suspectedDays = document.getElementById("timeDay");
var suspectedHours = document.getElementById("timeHours"); 
var suspectedMins = document.getElementById("timeMinutes");
var suspectedSecs = document.getElementById("timeSeconds");

function getTime(){
    // 每次调用都重新获取当前时间，计算最新的剩余时间
    var currentTime = new Date();
    var timeLeft = birthdayDate - currentTime;

    // 避免剩余时间为负数的情况
    if (timeLeft < 0) {
        suspectedDays.innerHTML = 0;
        suspectedHours.innerHTML = 0;
        suspectedMins.innerHTML = 0;
        suspectedSecs.innerHTML = 0;
        return;
    }

    var d = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
    var h = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var m = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
    var s = Math.floor((timeLeft % (1000 * 60)) / 1000);

    suspectedDays.innerHTML = d;
    suspectedHours.innerHTML = h;
    suspectedMins.innerHTML = m;
    suspectedSecs.innerHTML = s;
}

// 使用setInterval每秒执行一次getTime
setInterval(getTime, 1000);
// 页面加载时先执行一次，避免初始空白
getTime();

关键修改说明 #

• 将currentTime和timeLeft的计算移到getTime函数内部，确保每次调用都能获取最新的剩余时间。
• 替换setTimeout为setInterval，实现每秒自动更新倒计时。
• 添加了剩余时间为负的判断，避免出现负数倒计时。
• 移除了错误的getTime参数调用，直接在页面加载时执行一次函数初始化显示。

内容的提问来源于stack exchange，提问作者Random Student