前端多终端计时如何同步？

Question

问题描述

页面上有开始和结束两个操作；点击开始后开始计时并显示计时时长；
终端1点击开始后，计时开始；
终端2进入页面，从服务器获取到已经开始的时间，从获取到的时间开始计时；
终端1点击结束，计时截止，终端1显示最终持续时间；
终端2如何知道已经结束并停止计时，且显示的最终持续时间和终端1相同？

问题出现的环境背景及自己尝试过哪些方法

现在想到有两种方案
方案1：前端定时器

写一个定时器，每隔10S去服务端取一次数据，获取当前是开始还是结束的状态，如果是结束，则结束计时，显示计时的时间；

存在问题：

理论上可能存在最多10S的误差。如终端1点击开始后，终端2在10：00获取到状态为开始并开始计时；若在终端2下次调用接口之前，如10：01时终端1点击结束，终端1显示的最终持续时间为10：01；而终端2在10：10S时通过接口获知状态已经结束，终端2停止计时，显示的最终持续时间为10：10，和终端1不一致；

方案2：websocket实时消息推送

理论上来说，如果终端1点了停止，终端2实时获取到状态，再停止其计时，但存在网络问题，中间也可能有1~2S误差。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

两个终端有没有什么办法让一个终端点击停止后，另一个终端能够立即获知，并结束自己的计时，最终两个终端显示的持续时间保持一致？

Answer 1

请求长连接，计时结束手动断开连接，后台记录时间。

Answer 2

服务器推送 js 脚本，倒计时
类似

<script>count_down(500)</script>
<script>count_down(499)</script>
<script>count_down(498)</script>
// ...
<script>count_down(0)</script>

Answer 3

我来得有点晚了。。。

近来来遇到差不多的问题，我采用的方案是客户端倒计时 + 服务器授时纠偏的方案，主要的实现思路大致是：

1. 客户端向服务器获取时间，将获取到的时间与本地时间求差，并且将这个时间差作为纠偏基准存储起来；
2. 客户端开启一个倒计时器，倒计时器不是简单的 setInterval 或者 setTimeout，而是定时获取系统本地时间，并用上述纠偏基准修正；
3. 计时器会监测系统时间跳变，每次跳变之后，需要重新获取服务器时间来修改纠偏基准。

当然我的计时精度为 1s 级别，并且后端也给力，不必考虑网络延迟。如果要考虑网络延迟的话，可以监听 onreadystatechange 事件，将 readyState === 3 与 readyState === 4 两个状态之间的时间差作为延迟来修正服务器返回的时间。
当然，我的应用只考虑让客户端与服务器时间尽量一致，而解决题主的问题，需要在“停止”动作上做点文章：终端需要停止的时候，并不是立即停止，而是把停止时间定在将来的某一个时刻，并把这个时刻发送给另一端，到了这个时刻之后两端一起停止，这样就可以尽量保证两端停止时刻的一致性。
题主的问题肯定是解决了，希望对后来人有所帮助。