如何为每个客户端同步计时器

Question

我有一个工作计时器，但每次客户端访问网站时它都会从 25 段开始运行，我想同步它。 F.E。如果我在我的电脑上访问我的网页，当它显示剩余 15 段时，我从其他电脑访问它，我希望它也显示剩余 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);
}

Answer 1

如果您希望每个人都使用相同的计时器每 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)，以导致数字倒计时）。

如何为每个客户端同步计时器

How to synchronise a timer for everyone client

javascript

timer