页面上有开始和结束两个操作;点击开始后开始计时并显示计时时长;
终端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误差。
// 请把代码文本粘贴到下方(请勿用图片代替代码)
两个终端有没有什么办法让一个终端点击停止后,另一个终端能够立即获知,并结束自己的计时,最终两个终端显示的持续时间保持一致?
前端多终端计时的同步可以通过JavaScript实现,以下是一个简单的示例:
```javascript // 获取当前时间 var now = new Date();
// 设置定时器,每隔一段时间执行一次函数 setInterval(function() { // 获取终端的ID var terminalId = 'your-terminal-id';
// 在这里获取终端的当前状态,例如是否存在 var status = getTerminalStatus(terminalId);
// 如果存在,则更新计时器的时间 if (status) { var timerId = setInterval(function() { // 检查终端的状态,是否正在计时 if (status === '正在计时') { // 计时器的开始时间 var startTime = now;
// 计时器的结束时间
var endTime = startTime + 1000; // 1秒
// 更新计时器的时间
setInterval(function() {
// 检查终端的状态,是否已经结束计时
if (status === '结束计时') {
clearInterval(timerId);
}
}, 1000); // 1秒
}
}, 1000); // 1秒
} }, 1000); // 每1秒执行一次函数 ```
在这个示例中,我们首先获取当前的时间,然后设置一个定时器,每隔1秒执行一次函数。在函数中,我们首先获取终端的ID,然后获取终端的当前状态。如果存在,我们就更新计时器的时间,并检查终端的状态,是否正在计时。如果是,我们就更新计时器的时间,以1秒为单位。如果终端的状态是结束计时,我们就清除定时器。
注意:这个示例假设你有一个名为getTerminalStatus
的函数,该函数用于获取终端的状态。你需要根据你的实际情况来编写这个函数。
前端多终端计时的同步可以通过JavaScript实现,以下是一个简单的示例:
```javascript // 获取当前时间 var now = new Date();
// 设置定时器,每隔一段时间执行一次函数 setInterval(function() { // 获取终端的ID var terminalId = 'your-terminal-id';
// 在这里获取终端的当前状态,例如是否存在 var status = getTerminalStatus(terminalId);
// 如果存在,则更新计时器的时间 if (status) { var timerId = setInterval(function() { // 检查终端的状态,是否正在计时 if (status === '正在计时') { // 计时器的开始时间 var startTime = now;
// 计时器的结束时间
var endTime = startTime + 1000; // 1秒
// 更新计时器的时间
setInterval(function() {
// 检查终端的状态,是否已经结束计时
if (status === '结束计时') {
clearInterval(timerId);
}
}, 1000); // 1秒
}
}, 1000); // 1秒
} }, 1000); // 每1秒执行一次函数 ```
在这个示例中,我们首先获取当前的时间,然后设置一个定时器,每隔1秒执行一次函数。在函数中,我们首先获取终端的ID,然后获取终端的当前状态。如果存在,我们就更新计时器的时间,并检查终端的状态,是否正在计时。如果是,我们就更新计时器的时间,以1秒为单位。如果终端的状态是结束计时,我们就清除定时器。
注意:这个示例假设你有一个名为getTerminalStatus
的函数,该函数用于获取终端的状态。你需要根据你的实际情况来编写这个函数。