javascript - 如何为每个客户端同步计时器
问题描述
我有一个工作计时器,但每次客户访问网站时,它都会从 25 段开始运行,我想同步它。FE 如果我在我的电脑上访问我的网页,当它显示 15seg 离开时,我从其他电脑访问它,我希望它也显示 15 离开。
function timerr(){
var initial = 25000;
var count = initial;
var counter;
var initialMillis;
function timer() {
if (count <= 0) {
clearInterval(counter);
return;
}
var current = Date.now();
count = count - (current - initialMillis);
initialMillis = current;
displayCount(count);
function displayCount(count) {
var res = count / 1000;
if (res<0.1){
document.getElementById("timer").innerHTML = "";
}
else{
tiempo = res.toPrecision(count.toString().length);
tiempo_corto = tiempo.slice(0,-1);
document.getElementById("timer").innerHTML = tiempo_corto;
}
}
clearInterval(counter);
initialMillis = Date.now();
counter = setInterval(timer, 10);
}
解决方案
如果您希望每个人都有相同的计时器每 25 秒倒计时一次并在完全相同的时间停止,那么您可以简单地使用时间戳来保持一切同步。这是一个倒数计时器示例,它将每 6 秒重新启动一次(从 5 到 0),并且每个人都会在完全相同的时间达到零(除非他们的计算机时钟已关闭)。
const timerElement = document.getElementById('timer')
const TIMER_DURATION = 6
function step() {
const timestamp = Date.now() / 1000
const timeLeft = (TIMER_DURATION - 1) - Math.round(timestamp) % TIMER_DURATION
timerElement.innerText = timeLeft
const timeCorrection = Math.round(timestamp) - timestamp
setTimeout(step, timeCorrection*1000 + 1000)
}
step()
<p id="timer"></p> seconds
试试看 - 在两个不同的选项卡中打开此页面并运行它。这是为了自动考虑 setTimeout 并不总是在您要求它这样做的延迟时触发的事实(它将使用 timeCorrection 值调整下一个 setTimeout 以纠正这些问题)。
基本原则是我们获取当前时间戳并将其修改为我们希望此计时器持续的时间(在上面的示例中为 6 秒)。这个值对于每个人来说总是相同的,并且总是一个范围从 0 到 5 的数字。它也是一个每秒递增的数字(这就是为什么我们(TIMER_DURATION - 1)
从它减去,以使数字计数而是向下)。
推荐阅读
- abap - 如何从另一个系统获取数据
- java - JDK目录未设置或无效(统一)?
- php - 收不到邮件 (PHP)
- python - JSON.loads 编码问题 - 文件与字符串
- android - 从 StartActivity(ActivityFlags.NewTask) 返回时未调用 BroadcastReceiver OnReceive
- python - Scipy.Minimize,如何在目标函数和约束之间共享相同的对象?
- javascript - 使用正则表达式在查询中查找重复参数
- docker - 有没有办法在集群中使用多个 docker 注册表代理?
- google-cloud-platform - 生成 GCP 资源清单
- database - 对仅通过多对多关系不同的表使用专业化吗?