使用Javascript在网页上显示另一台计算机的时间

Displaying another computer's time on a web page using Javascript?

本文关键字：一台 计算机 时间 Javascript 网页 显示 使用      更新时间：2023-09-26

我正在开发一个对时间非常敏感的web应用程序。给我的业务规则之一是，应用程序的行为必须始终依赖于web服务器上的时间，而不管客户端的时钟是什么时间。为了让用户更清楚，我被要求在web应用程序中显示服务器的时间。

为此，我编写了以下Javascript代码: 
clock = (function () {
var hours, minutes, seconds;
function setupClock(updateDisplayCallback) {
    getTimeAsync(getTimeCallback);
    function getTimeCallback(p_hours, p_minutes, p_seconds) {
        hours = p_hours;
        minutes = p_minutes;
        seconds = p_seconds;
        setInterval(incrementSecondsAndDisplay, 1000);
    }
    function incrementSecondsAndDisplay() {
        seconds++;
        if (seconds === 60) {
            seconds = 0;
            minutes++;
            if (minutes === 60) {
                minutes = 0;
                hours++;
                if (hours === 24) {
                    hours = 0;
                }
            }
        }
        updateDisplayCallback(hours, minutes, seconds);
    }
}
// a function that makes an AJAX call and invokes callback, passing hours, minutes, and seconds.
function getTimeAsync(callback) {
    $.ajax({
        type: "POST",
        url: "Default.aspx/GetLocalTime",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            var date, serverHours, serverMinutes, serverSeconds;
            date = GetDateFromResponse(response);
            serverHours = date.getHours();
            serverMinutes = date.getMinutes();
            serverSeconds = date.getSeconds();
            callback(serverHours, serverMinutes, serverSeconds);
        }     
    })
}
return {
    setup: setupClock
};
})();

传递给updateDisplayCallback的函数是一个简单的在网页上显示日期的函数

基本思想是，Javascript进行异步调用来查找服务器的时间，将其存储在客户端，然后每秒更新一次。

一开始，这似乎可以工作，但随着时间的推移，显示的时间每分钟落后几秒。我让它开了一整夜，当我第二天早上来的时候，它差了一个多小时!这是完全不能接受的，因为web应用程序可能一次打开好几天。

我如何修改这段代码，使web浏览器将连续准确地显示服务器的时间?

Javascript的setInterval不够精确，不能让你像这样保持时间

我的解决方案是:

  1. 以毫秒为单位定期获取服务器的时间(不需要非常频繁，因为两个时钟几乎不会偏离那么多)
  2. 以毫秒为单位获取客户端时间
  3. 计算服务器与客户端的时钟偏差(client-server)
  4. 通过获取客户端时间并添加时钟偏差来定期更新时钟显示

编辑:为了更准确，您可以测量服务器请求的往返时间，将其除以2，并将该延迟计入时钟偏差。假设往返行程的持续时间是对称的，这将给出更准确的计算。

setInterval不是调度时间关键事件的可靠方法。它可能需要更少或更多的1000ms来运行你的回调，这取决于目前JavaScript有多忙。

更好的方法是采用较短的间隔并使用new Date().getTime()来检查是否有一秒钟过去了。

浏览器允许的最小间隔为10。

谢谢你的回答。我对两个答案都投了赞成票，因为它们包含了有用的信息。然而，我并没有使用任何一个答案中规定的确切答案。

我最后的决定有点不同。

我把我学到的东西写在我的个人网页上。

首先，我现在明白，使用setInterval(..., 1000)是不够好的，有一些事情每秒做一次很长一段时间。然而，在我看来，用更短的间隔来"轮询"时间来寻找第二个变化是非常低效的。

我决定跟踪服务器时间和客户端时间之间的"偏移"是有意义的。

我的最终解决方案是这样做:

(1)对服务器执行AJAX调用以获取时间。该函数还检查客户端时间，并以毫秒为单位计算服务器时间和客户端时间之间的差异。由于网络延迟和其他因素，这个初始获取可能会延迟几秒。对于我来说，这是可以的。

(2)执行tick函数。每次执行tick时，它都会检查自上次执行tick以来的时间。它将使用这段时间来计算传递给setTimeout的参数，以便时间显示大约每秒更新一次。

(3)每次tick函数计算要显示的时间时，它都需要客户端时间并添加步骤(1)中计算的差值。这样，我不依赖于客户端来正确设置时间，但我确实依赖于客户端来准确地测量经过的时间。对于我来说，这是可以的。最重要的是，无论setTimeout如何不准确或被其他进程(例如，模态对话框)中断，显示的时间应该始终是准确的。

相关文章：