JavaScript setTimeout异常：秒表仅运行不足10ms即停止

原代码存在的核心问题 #

• 变量作用域错误：startTime 是点击事件回调内的局部变量，timer 函数无法访问该变量，会直接抛出 ReferenceError，导致计时逻辑中断。
• 计时器仅执行一次：setTimeout 只会触发一次回调函数，所以秒表仅运行一次就停止，无法持续计时。
• 秒数计算逻辑错误：seconds 每次进入回调都被重新声明为0，无法累加；且elapsed是const常量，不能赋值重置，手动重置elapsed的思路完全错误。

修正后的代码 #

// 声明外部作用域变量，确保timer能访问到计时状态
let startTime;
let timerId;

document.getElementById("start_button").addEventListener('click', () => {
    startTime = new Date();
    // 清除已有计时器，避免重复点击导致计时叠加
    if (timerId) clearTimeout(timerId);
    timer();
});

const timer = () => {
    timerId = setTimeout(() => {
        const now = new Date();
        const elapsed = now - startTime;
        
        // 正确计算总秒数和当前毫秒数
        const seconds = Math.floor(elapsed / 1000);
        const milliseconds = elapsed % 1000;

        document.getElementById("milli_seconds").innerHTML = milliseconds;
        document.getElementById("seconds").innerHTML = seconds;

        // 递归调用timer，实现持续计时
        timer();
    }, 1);
}

关键修改说明 #

1. 作用域调整：将startTime和timerId提升到外部作用域，让timer函数能正常访问开始时间，同时用timerId管理计时器实例，防止重复点击创建多个计时任务。
2. 持续计时实现：通过在setTimeout回调末尾递归调用timer，让计时器循环执行，实现秒表持续运行的效果。
3. 计时逻辑修正：基于总耗时elapsed直接计算秒数（总耗时除以1000取整）和毫秒数（总耗时对1000取余），无需手动重置计时数值，逻辑更准确简洁。

内容的提问来源于stack exchange，提问作者MAXWEL OMONDI