javascript - 在多个浏览器或设备上运行时计时器不同步

Question

我创建了一个在多个浏览器上不同步的计时器。在浏览器的非事件选项卡上，甚至在设备上，计时器运行得更快或更慢。 不同选项卡上有 3-4 秒的差异。如何同步它们？

这是我的模块代码:

import { Observable, BehaviorSubject, Subscription } from 'rxjs';
export class RAFTimer {
    public currentFrameId: number;
    public startTime: number;
    public numbers: BehaviorSubject<number>;
    constructor() {
        this._raf();
        this.numbers = new BehaviorSubject<number>(0);
        this.startTime = 0;
    }

    private _raf() {
        this.currentFrameId = requestAnimationFrame(timestamp => this._nextFrame(timestamp));
      }
      private _nextFrame(timestamp: number) {
        if ( this.startTime == 0) {
            this.startTime = timestamp;
        }
        const diff: number = timestamp - this.startTime;
        if ( diff > 100) {
           const n: number = Math.round(diff / 100);
          this.startTime = timestamp;
          this.numbers.next(n);
        }
        this._raf();
      }
      cancel() {
        cancelAnimationFrame(this.currentFrameId);
        this.currentFrameId = null;
      }
}

这是组件代码:

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { RAFTimer } from './raftimer';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'app';
  public timeInterval:number=10;
  public timeLeft:number=10000;
  constructor(private timer:RAFTimer) { 

  }

  ngOnInit() {
    let countNumber=1;
    let auctiontimer = this.timer.numbers.subscribe(
      (val) => {
          countNumber = countNumber+val;
          if(countNumber >= this.timeInterval) {
            this.timeLeft = this.timeLeft-countNumber/this.timeInterval;
            if(this.timeLeft<0) {
                this.timeLeft= 0;
            }
              countNumber=1;
          }
  }); 
  }

}

请在两个不同的选项卡上同时运行此网址，您将在几秒钟或 1 分钟内注意到差异。 https://angular-timer-raf.stackblitz.io/

如果您愿意，您还可以通过打开此网址来编辑这些代码行==>

网址 https://stackblitz.com/edit/angular-timer-raf

我还知道，当浏览器变得不活动时，计时器就会变慢，我搜索了很多东西，但没有一个对我有用。但无论如何我都需要同步计时器。

Answer 1

您创建了一个外部(我希望是全局的或特定于拍卖的)服务来获取剩余时间，并且您可以从该服务中获得可观察的结果。很好，我也会这样做!但我认为你应该从服务中删除“RequestAnimationFrame”。我的猜测是您正在使用它来更新 View 。你不应该那样做。 RequestAnimationFrame，就像“setTimeout()”一样，是一个依赖JS引擎在某个时间异步调用该方法的方法。在此之前，线程可能会被某些 View 层操作阻塞。

因此，您应该让 Angular 本身处理 View 更新，例如:<div>Time: {{timer.numbers | async}}</div> (异步管道会自动触发每个新值的更改检测)。

如果这没有帮助(不够精确)，您可以考虑将计时器服务移动到完全不同的线程(浏览器中的 WebWorker)

您还可以利用后端每隔...秒同步一次您的 RAFTimer-Service。使用 REST，您可以通过每隔 ... 秒发出一次请求，询问当前时间和其他拍卖信息来实现这一点；我假设您正在制作拍卖/投标应用程序。使用 websockets，您可以通过让后端服务在每次更新/间隔时将该信息推送到客户端来实现这一点。