NextJS计时器到0不停止且显示负数的修复方案咨询

你的计时器出现负数的核心问题是：当剩余时间为负时，没有终止定时器的运行，同时原有的时间计算逻辑在处理负数时会产生异常值，导致显示异常。以下是具体修复方案：

1. 修正剩余时间计算逻辑 #

在getTimeRemaining函数中，当剩余时间小于0时直接返回全0的结果，避免负数参与后续计算导致错误：

const getTimeRemaining = (e) => {
    let total = (Date.parse(e) - Date.parse(new Date())) / 1000; 

    // 剩余时间为负时直接返回全0
    if (total < 0) {
        return {
            total: 0,
            days: 0,
            hours: 0,
            minutes: 0,
            seconds: 0
        };
    }

    const days = Math.floor(total / 86400);
    total -= days * 86400;

    const hours = Math.floor(total / 3600) % 24;
    total -= hours * 3600;

    const minutes = Math.floor(total / 60) % 60;
    total -= minutes * 60;

    // 取整确保秒数为整数
    const seconds = Math.floor(total % 60);
    return {
        total, days, hours, minutes, seconds
    };
}

2. 终止定时器并固定显示00:00:00 #

在startTimer函数中，当剩余时间耗尽时，不仅设置计时器显示为00:00:00，还要停止定时器，避免其持续运行：

const startTimer = (e) => {
    let { total, days, hours, minutes, seconds } = getTimeRemaining(e);
    
    if (total <= 0) {
        setTimer('00:00:00');
        // 停止定时器并清空引用
        if (Ref.current) {
            clearInterval(Ref.current);
            Ref.current = null;
        }
        return;
    }

    // 统一格式化时间补零逻辑
    const formattedDays = days < 10 ? `0${days}` : days.toString();
    const formattedHours = hours < 10 ? `0${hours}` : hours.toString();
    const formattedMinutes = minutes < 10 ? `0${minutes}` : minutes.toString();
    const formattedSeconds = seconds < 10 ? `0${seconds}` : seconds.toString();

    setTimer(`${formattedDays}:${formattedHours}:${formattedMinutes}:${formattedSeconds}`);
}

修复说明 #

• 终止定时器：之前的代码只是跳过了计时器更新，但定时器仍在每秒执行，导致后续可能出现异常计算，停止定时器可以彻底终止倒计时流程。
• 负数拦截：在时间计算的源头拦截负数，避免后续逻辑处理负数产生的异常时间值（比如负数天数、错误的时分秒计算）。
• 格式化优化：统一补零逻辑，同时修正秒数的取整问题，避免显示小数秒。

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