SvelteKit倒计时Firebase实时同步数字闪烁问题修复求助

问题描述 #

我正在基于《How to implement a distributed countdown timer in Firebase》方案，开发一款借助Firebase Realtime DB实现跨浏览器同步的SvelteKit倒计时计时器。当前遇到两个问题：

• 按固定间隔读取文档并更新状态时，倒计时数字出现闪烁
• 调用addTen函数更新Firebase值（update操作也会引发相同问题）后，未刷新页面时console.log会执行两次

已实现Firebase onValue的自定义订阅销毁逻辑且运行正常，但addTen函数引发上述问题。相关代码如下：

const fbUnsubscribe = onValue(currentRef, (snapshot) => {
    const current = snapshot.val();
    const { remaining, startAt } = current;

    const interval = setInterval(() => {
        let timeLeft = remaining - (Date.now() - startAt - serverTimeOffset) / (60 * 1000);

        if (timeLeft < 0 || isNaN(timeLeft)) {
            clearInterval(interval);
            clearBooking();
        } else {
            // console.log(timeLeft);
            timeLeft -= 1;
            update(() => timeLeft);
        }
        console.log(remaining, new Date().getSeconds());
    }, 1000);
});

const addTen = () => {
    get(child(ref(firebaseDB), currentPath)).then((snapshot) => {
        if (snapshot.exists()) {
            const current = snapshot.val();
            console.log(current);
            fbSet(currentRef, {
                ...current,
                remaining: current.remaining + 10
            });
        } else {
            console.error('No document found.');
        }
    });
};

解决方案 #

一、修复倒计时数字闪烁问题 #

闪烁的核心原因是每次Firebase数据更新时都会创建新定时器，但旧定时器未被清除，导致多个定时器同时更新状态，数字频繁跳动。

修改步骤：

1. 将定时器实例保存在外部作用域，每次onValue触发时先清除旧定时器
2. 实时计算剩余时间，避免手动减1导致的偏差
3. 对计算结果做取整和边界处理，避免小数或负数引发的视觉跳动

修改后的代码：

// 外部保存定时器实例，确保全局唯一
let countdownInterval;

const fbUnsubscribe = onValue(currentRef, (snapshot) => {
    const current = snapshot.val();
    const { remaining, startAt } = current;

    // 清除上一次的定时器，避免多实例冲突
    if (countdownInterval) {
        clearInterval(countdownInterval);
    }

    countdownInterval = setInterval(() => {
        // 基于服务器时间偏移实时计算已流逝的分钟数
        const elapsedMinutes = (Date.now() - startAt - serverTimeOffset) / (60 * 1000);
        // 剩余时间 = 初始剩余分钟数 - 已流逝分钟数
        let timeLeft = remaining - elapsedMinutes;

        if (timeLeft < 0 || isNaN(timeLeft)) {
            clearInterval(countdownInterval);
            clearBooking();
        } else {
            // 取整并确保不小于0，避免小数跳动
            update(() => Math.max(0, Math.floor(timeLeft)));
        }
    }, 1000);
});

二、修复addTen调用后console.log执行两次的问题 #

重复打印的原因有两点：

1. addTen内部调用get后执行了一次console.log(current)
2. onValue回调因数据更新被触发，新启动的定时器又会执行console.log

修改步骤：

1. 移除addTen内部的console.log(current)，统一在onValue回调中调试
2. 使用Firebase事务更新数据，避免先读再写的竞态问题，同时减少一次数据库请求

修改后的addTen函数：

const addTen = () => {
    // 用事务更新，避免多端同时操作时的数据覆盖
    runTransaction(currentRef, (currentData) => {
        if (currentData) {
            currentData.remaining = (currentData.remaining || 0) + 10;
            return currentData;
        }
        return null;
    }).catch((error) => {
        console.error('更新失败:', error);
    });
};

额外提示：如果需要调试数据变化，可在onValue回调的开头添加console.log('数据更新:', current)，这样只会在数据变化时打印一次，不会重复。

内容的提问来源于stack exchange，提问作者Mr.Ko