JavaScript定时器开发：重复调用setTimeout触发页面刷新问题

1. 页面刷新问题修复 #

按钮位于<form>标签内时，默认会触发表单提交行为，导致页面刷新。可以通过以下两种方式解决：

方法一：修改按钮类型 #

将按钮的type属性设置为button，覆盖默认的submit类型：

<button type="button" onclick="startTimer()">Start</button>

方法二：阻止默认事件 #

在startTimer函数中添加事件阻止逻辑：

function startTimer(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 原有逻辑代码...
}

同时修改按钮的onclick调用，传入事件对象：

<button onclick="startTimer(event)">Start</button>

2. 定时器触发逻辑修复 #

原代码中数组比较current === f永远不会成立，因为JavaScript数组是引用类型，此语法比较的是数组的内存地址而非内容。需要改为逐个元素比较：

function updateTime(f) {
    let d = new Date();
    let current = [d.getSeconds(), d.getMinutes(), d.getHours()];

    // 逐个比较时分秒是否匹配
    if (current[0] === f[0] && current[1] === f[1] && current[2] === f[2]) {
        alert("Time is up!");   
    } else {
        setTimeout(updateTime, 1000, f);
    }
}

3. 时间计算逻辑优化（可选） #

手动处理时间进位容易出现边界错误（比如跨天场景），建议直接计算结束时间的时间戳，逻辑更简洁可靠：

function updateTime(finishTime) {
    const now = new Date().getTime();
    if (now >= finishTime) {
        alert("Time is up!");
    } else {
        // 递归调用自身，每秒检查一次
        setTimeout(() => updateTime(finishTime), 1000);
    }
}

function startTimer(e) {
    e.preventDefault();
    
    // 处理输入值，非数字时默认设为0
    let increaseSecs = parseInt(document.getElementById("seconds").value) || 0;
    let increaseMins = parseInt(document.getElementById("minutes").value) || 0;
    
    // 计算总毫秒数，加上当前时间戳得到结束时间
    const totalMs = (increaseMins * 60 + increaseSecs) * 1000;
    const finishTime = new Date().getTime() + totalMs;

    updateTime(finishTime);
}

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