保持Ajax计时器同步

问题描述

我具有以下用于在页面上显示计时器的jQuery函数:

I have the following jQuery function that I'm using to display a timer on a page:

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);
    }
});
};

如您所见，它实际上正在运行一个脚本，该脚本计算出直到调用刷新为止(使用refresh()函数)还剩下多少时间.我觉得这有点麻烦，因为它每秒都在调用，但是同时在Ajax中保持同步很重要，因为如果过早调用refresh()函数，页面将停止同步运行.

As you can see, it's actually running a script that calculates how much time is remaining until a refresh is called (with the refresh() function). I feel this is a bit intensive because it's calling every second, but I feel it's important at the same time to have synchrony in the Ajax because if the refresh() function is called too early the page stops running in sync.

我如何使计时器仍然总是在减少时间，而仅每30秒左右与服务器同步一次?

How can I make it that the timer is still always decreasing in time, but only synchronises with the server every 30 seconds or so?

精度对于此应用程序确实很重要.

Precision is really important for this application.

推荐答案

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

Use a variable remainingTime to store the remaining time:

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处理程序内setTimeout并在error处理程序中设置更长的超时时间的情况.但这应该可以解决将更新与显示脱钩的问题.

NOTE: It might be the case that you want to setTimeout inside the success handler, as you already did, and a longer timeout in the error handler. But this should do the trick for decoupling the updating from the display.

您肯定地应该使用setInterval进行倒计时，因为setInterval会尝试以该确切的间隔触发，而setTimeout会导致漂移，也就是说，如果花费10ms的时间更新DOM，下一次调用将仅在1010ms之后发生，依此类推.使用setInterval并非如此，因为浏览器将尽最大努力每1000 ms实际触发一次该功能.

You definitely should use setInterval for the countdown though, because setInterval tries to trigger with that exact interval, whereas setTimeout will cause drift, that is, if it takes 10ms to update the DOM, the next call will only occur after 1010ms, and so on. With setInterval, this is not the case because the browser will do its best to actually trigger that function every 1000 ms.

这篇关于保持Ajax计时器同步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！