多浏览器及设备间Timer不同步问题及同步方案咨询

首先，你的问题根源其实很明确：

• 浏览器会对非活跃标签页的requestAnimationFrame进行节流（比如降到每秒仅触发1次），导致定时器在后台标签跑慢
• 不同设备的系统时钟本身存在偏差，加上本地定时器依赖自身时钟累计，自然会出现跨设备/跨标签的时间差

下面是几个针对性的解决方案，按优先级排序：

1. 基于服务器时间的核心同步方案 #

这是跨设备、跨标签同步的根本解法，思路是用权威的服务器时间作为基准，而不是依赖本地时钟或RAF的累计：

• 定期（比如每30秒）向服务器请求当前UTC时间戳
• 计算本地时间与服务器时间的偏移量（serverTime - Date.now()）
• 每次更新定时器显示时，用Date.now() + 偏移量得到精准的服务器同步时间，再基于这个时间计算你的numbers值

修改后的RAFTimer示例：

import { Observable, BehaviorSubject, Subscription, interval } from 'rxjs';

export class RAFTimer {
  public numbers: BehaviorSubject<number>;
  private serverOffset = 0; // 本地与服务器的时间偏移量
  private syncSubscription: Subscription;
  private rafId: number;

  constructor() {
    this.numbers = new BehaviorSubject<number>(0);
    // 初始化服务器时间同步
    this.syncServerTime();
    // 每30秒同步一次服务器时间，修正偏移
    this.syncSubscription = interval(30000).subscribe(() => this.syncServerTime());
    // 启动RAF更新，但不再依赖RAF累计时间
    this.startRAF();
  }

  // 从服务器获取当前时间（这里需要你实现后端接口，返回UTC时间戳）
  private async syncServerTime() {
    try {
      const response = await fetch('/api/server-time');
      const serverTime = await response.json(); // 假设返回的是UTC时间戳（毫秒）
      this.serverOffset = serverTime - Date.now();
    } catch (err) {
      console.warn('服务器时间同步失败，使用本地时间');
    }
  }

  private startRAF() {
    const update = () => {
      // 用服务器同步后的时间计算当前值
      const syncedTime = Date.now() + this.serverOffset;
      // 这里替换成你原本基于startTime的计算逻辑，比如：
      // const elapsed = syncedTime - this.startTime;
      // const currentNumber = Math.floor(elapsed / 1000);
      // 示例：简单递增，基于同步时间
      const currentNumber = Math.floor(syncedTime / 1000);
      this.numbers.next(currentNumber);
      this.rafId = requestAnimationFrame(update);
    };
    this.rafId = requestAnimationFrame(update);
  }

  public stop() {
    cancelAnimationFrame(this.rafId);
    this.syncSubscription.unsubscribe();
  }
}

2. 同一设备内跨标签页优化 #

如果需要同一设备的多个标签页严格同步，可以结合BroadcastChannel API，让活跃标签页作为主定时器，把同步后的时间广播给其他标签：

• 当标签页变为活跃时，成为主定时器，定期广播当前同步时间
• 非活跃标签页监听广播，直接使用主标签的时间值，不再自己计算

示例补充代码：

private channel: BroadcastChannel;

constructor() {
  // ... 其他初始化代码
  this.channel = new BroadcastChannel('timer-sync');
  
  // 监听其他标签的广播
  this.channel.addEventListener('message', (e) => {
    if (e.data.type === 'SYNC_TIME') {
      // 直接使用广播的时间值更新
      this.numbers.next(e.data.value);
    }
  });

  // 监听标签页活跃状态
  document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'visible') {
      // 活跃标签页，开始广播
      this.startBroadcasting();
    } else {
      // 非活跃标签页，停止广播
      this.stopBroadcasting();
    }
  });
}

private broadcastInterval: number;
private startBroadcasting() {
  this.broadcastInterval = setInterval(() => {
    const syncedTime = Date.now() + this.serverOffset;
    const currentNumber = Math.floor(syncedTime / 1000);
    this.channel.postMessage({ type: 'SYNC_TIME', value: currentNumber });
  }, 1000); // 每秒广播一次
}

private stopBroadcasting() {
  clearInterval(this.broadcastInterval);
}

public stop() {
  // ... 其他停止逻辑
  this.channel.close();
}

3. 避免依赖RAF的累计时间 #

你原本的代码可能是通过累计RAF的调用次数或间隔来计算时间，这在RAF被节流时会完全不准。一定要每次都基于当前时间（同步后的）来计算值，而不是依赖RAF的触发次数。

总结一下：

• 跨设备同步必须依赖服务器时间基准
• 同一设备跨标签可以用BroadcastChannel强化同步
• 永远不要用RAF的调用间隔来累计时间，要直接取当前时间计算

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