如何在javascript中设置服务器端倒数计时器？

Question

我目前正在 web 视图上构建此计时器，其中计时器将使用 javascript 自动更新，并且计时器将每秒递减。

当前的问题是，当用户让手机进入睡眠状态时，计时器不会相应更新，倒计时会有点过，所以我想通过服务器端更新计时器而不是依赖函数如果用户让手机进入睡眠状态，它就会中断。这是我拥有的当前代码

<h2 id="timer"> 
   1:00
<h2>

<script>
   var countdown = new Date("<?php echo $row['end_timer'] ?>").getTime();
   var now = new Date("<?php echo date('Y-m-d H:i:s') ?>")

     var x = setInterval(function() {

         // Increase the distance by 1
         now.setSeconds(now.getSeconds() +                                           

         var distance = countdown - (now.getTime());

         var seconds = Math.floor((distance % (1000 * 60)) / 1000);

          document.getElementById("timer").innerHTML = (seconds < 10 ? '0' : '') + seconds;

          if (distance < 0) {
             clearInterval(x);
             document.getElementById("timer").innerHTML = "00";
             location.reload();
           }
     }, 1000);
</script>

Answer 1

我可以想出三种方法来与服务器同步倒计时。

1. 每秒或手机唤醒时发送AJAX request
2. 使用Server Sent Events
3. 使用WebSockets

但是有一个更简单的方法。你可以重写你的JS。 您将 1 秒添加到您的 now 变量。但这不起作用，因为如果手机处于睡眠状态，setInterval 不会在指定的时间间隔（在您的情况下为 1000 毫秒）调用其回调。所以你在now 上加了一秒，尽管已经过了一秒多。

var countdown = new Date(Date.now()+30*1000) // Countdown will end in 30 sec from now
var cdElem = document.getElementById("coutdown");

function displayCountdown() {
  //Time until the end of the countdown in ms
  var deltaTime = countdown.getTime() - Date.now();
  if(deltaTime < 0) {
    clearInterval(intervalId)
    deltaTime = 0;
  }
  cdElem.innerText = Math.round(deltaTime/1000);
}

var intervalId = setInterval(displayCountdown, 1000);
displayCountdown()

<h1 id="coutdown"></h1>