javascript - 我如何实现 Angular2 时钟

Question

我尝试使用服务器时间戳实现 angular2 时钟，但被击中了。第二个代码返回一个静态日期时间

this.clock = Observable.interval(1000).map(()=> new Date());

{{clock | async | date:'medium'}} 

每秒更新一次，效果很好

this.clock = Observable.interval(1000).map(()=> new Date(1512151753372));

{{clock | async | date:'medium'}} 

这根本不更新

1512151753372是服务器提供的时间戳

有什么想法吗？？

Answer 1

选项 1(不要这样做...)

您可以为 .scan 运算符播种来自服务器的日期，并像这样每秒递增一次:

Rx.Observable
  .interval(1000)
	.scan(function (acc, x) {
    return new Date(acc.getTime() + 1000);
  }, new Date(1512151753372))
  .subscribe(x => { console.log(x); });

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

这最终会漂移，因为它不会精确地每秒运行一次。它也没有考虑 DST 等异常情况。

选项 2

这可能会更准确，但您必须在外部或 rxjs 中做一些工作来确定一些变量的范围:

const server = 1512151753372;
const now = Date.now();
Rx.Observable
  .interval(1000)
  .map(x => new Date(server + Date.now() - now))
  .subscribe(x => console.log(x));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

这应该可以避免 #1 中的漂移问题，但您仍然应该每 15 分钟从服务器获取一个新的时间戳，以避免 DST 问题。唯一应该发生的漂移发生在您从服务器获取时间戳和使用 Date.now() 为它播种之间。

请注意，如果客户端更改其系统时钟，那么它可能会中断您的时钟，直到您再次与服务器同步。