JavaScript自定义定时器输出NaN且无法停止问题求助

输出NaN的故障原因 #

• 计时变量未初始化：全局声明的h、m、s仅做了声明没有赋初始值，默认值为undefined，参与加减、除法等数值运算后结果统一为NaN
• 时间计算逻辑错误：timer函数内小时计算写为h = Math.floor(h / 60)，属于逻辑错误，应该基于分钟数计算小时；同时没有对秒、分钟做取余处理，数值会持续累加不符合常规时间展示规则

定时器无法停止的故障原因 #

• 定时器实例ID存储范围错误：你将存储定时器ID的变量id定义为runClock函数的局部变量，每次调用runClock都会生成全新的局部id变量，第二次点击触发停止逻辑时，拿到的是未赋值的新id，无法匹配到之前启动的定时器实例，因此清除操作无效

let running = false,
    showClock = false,
    time,
    intervalId // 将定时器ID移到全局作用域存储

// 初始化计时变量为0
let h = 0, m = 0, s = 0
function timer() {
    s = s + 1
    m = Math.floor(s / 60)
    h = Math.floor(m / 60) // 修正为基于分钟计算小时
    // 对秒、分钟做取余，保证展示符合0-59的常规规则
    time = `${h} : ${m % 60} : ${s % 60}`
    console.log(time)
}

function runClock() {
    running = !running
    showClock = !showClock
    if (running) {
        intervalId = setInterval(timer, 1000)
    } else {
        clearInterval(intervalId)
    }
}

内容的提问来源于stack exchange，提问作者Robin Kohrs