Question

我目前正在网络视图上构建此计时器，该计时器将使用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

我可以想到三种将倒计时与服务器同步的方法。

每秒发送一次http://zattest.com.zawataafnantechnologies.com/newapi/api/register或电话唤醒时发送
使用AJAX request
使用Server Sent Events

但是有一种更简单的方法。您可以只重写您的JS。您正在向now变量中添加1秒。但这是行不通的，因为如果电话处于休眠状态，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>

如何在JavaScript中使用服务器端倒数计时器？

1 个答案: