保持 Ajax 计时器同步

Question

我有以下 jQuery 函数，用于在页面上显示计时器：

function update() {
  $.ajax({
    type: 'POST',
    url: 'check_time.php',
    data: 'checktime=true',
    timeout: 0,
    success: function(data) {
        $(".time_remaining").html(data);
        window.setTimeout(update, 1000);
        var time = data;
        if(time<=0)
        {
            $(".time_remaining").html("Reloading the page now.");
            refresh();
        }
        else
        {
            $(".time_remaining").html("There are "+data+" seconds left." );
        }
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Error contacting server. Retrying in 60 seconds.');
      window.setTimeout(update, 60000);
    }
});
};

如您所见，它实际上正在运行一个脚本，该脚本计算调用刷新之前剩余的时间（使用刷新（）函数）。我觉得这有点密集，因为它每秒都会调用，但我觉得同时在 Ajax 中保持同步很重要，因为如果过早调用刷新（）函数，页面将停止同步运行。

我如何才能使计时器始终在时间上减少，但仅每 30 秒左右与服务器同步一次？

精度对于该应用来说非常重要。

Answer 1

使用变量 remainingTime 存储剩余时间：

var remainingTime;

使用 ajax 更新：

function update() {
    $.ajax(..., success: function(data) {
        remainingTime = parseInt(data, 10);
    });
}

连续更新：

setInterval(update, 30 * 1000);

倒计时：

function countdown() {
    if(remainingTime-- < 0) {
        $(".time_remaining").text("Reloading the page now.");
        refresh();
    } else {
        $(".time_remaining").text("There are " + remainingTime + " seconds left." );
    }
}

连续倒计时：

setInterval(countdown, 1000);

注意： 您可能想要 正如您已经所做的那样，在 success 处理程序中设置 Timeout，并在 error 处理程序中设置更长的超时。但这应该可以解决将更新与显示分离的问题。

不过，您肯定应该使用setInterval进行倒计时，因为setInterval尝试以确切的间隔触发，而setTimeout会造成漂移，即如果需要10ms更新DOM，那么下次调用只会在1010ms之后发生，以此类推。使用 setInterval 时，情况并非如此，因为浏览器将尽力每 1000 毫秒实际触发该函数一次。

Answer 2

像这样的事情：

function update(secs) {
  if (secs % 30 == 10) {
    $.ajax({
     ...
       window.setTimeout("update(" + (data - 1) + ");", 1000);
     ...
    });
  } else {
    $(".time_remaining").html("There are "+secs+" seconds left." );
    window.setTimeout("update(" + (secs - 1) + ");", 1000);
  }
}

我已经测试过 secs modulo 30 是 10，因为这可以为您提供准确的最后 10 秒。