使用服务器同步创建 javascript 个计时器

Question

我想用每秒递增的 javascript 计时器显示当前时间（包括秒数）。但是我不能相信系统时间，所以我想用我的服务器的时间戳初始化 javascript 函数，然后只用 setTimeout 添加一秒到传递给函数的初始化时间戳。然后我了解到 setTimeout 不是很准确，所以时钟会在一段时间后显示几分钟。

所以我的想法是让它每 60 秒与提供初始时间戳的服务器同步时间。但后来我开始担心它会导致大量内存泄漏，因为 setTimeout 方法实际上是递归的，我的建议方法在大图上看起来像这样：

function runClock(currentTime) {

    var now = new Date(Date.parse(currentTime));

   // 1. write now variable to some DOM element

   // 2. check if we need to sync time with server (counter variable or similar to see if approx 60sec has passed) 
   //   and if so do an $.ajax call to the server and update "now" variable with timestamp from the server

    t = setTimeout(function () {
        now.setSeconds(now.getSeconds() + 1);
        runClock(now);
    }, 1000);

}

如果这是正确的方法，任何人都可以指导我吗？如果是这样，请调整我的方法，使其不会由于回调和递归而造成内存泄漏。

Answer 1

实际上，我认为您指的是方法 setInterval。我相信你应该使用一个初始值为 1 的计数器。每次调用 interval 方法后，计数器应该增加 1，然后你可以检查计数器是否超过值 60，然后才进行 ajax调用并重新启动 everythink。

它应该看起来像这样

var counter = 1;
var timer = 0;
yourAjaxCall();
var t = setInterval(function(){
    //do client side stuff with time

    //after you done check if time needs to be fetched from server {60 seconds passed}
    counter++;
    if(counter >= 60){
        counter = 1;
        yourAjaxCall();
    }
}, 1000);

function yourAjaxCall(){
    $.ajax({
        url: 'yoururl',
        type: 'post',
        success: function(response){
            timer = response;
        }
    });
}

使用服务器同步创建 javascript 个计时器

Create javascript timer with server sync

javascript

ajax

time

timer

callback