如何為每個客戶端同步計時器

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)到導致數字倒計時）。