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

【问题标题】：Create javascript timer with server sync使用服务器同步创建 javascript 计时器
【发布时间】：2021-04-01 21:57:57
【问题描述】：

我想用每秒递增的 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);

}

如果这是正确的方法，谁能指导我，如果是，请调整我的方法，以免由于回调和递归而造成内存泄漏。

【问题讨论】：

标签： javascript ajax time timer callback

【解决方案1】：

实际上，我认为您的意思是setInterval 方法。我相信您应该使用初始值为 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;
        }
    });
}

【讨论】：