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

Question

我有一个工作计时器，但每次客户访问网站时，它都会从 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);
}

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)到导致数字倒计时）。