Question

我正在构建一个使用AJAX从服务器检索数据的网页。我希望在div中显示时间（以小时/分钟/秒为单位，如10:45:30，带有前导零）。我的一个AJAX调用很少运行;每次通话大约45分钟左右。有问题的调用获取一个JSON字符串，其中包含服务器的当前时间（通过PHP）。我能够将这个字符串与小时，分钟和秒分开或作为一个项目。

我见过很多使用setInterval和JS函数来获取当前时间的计时器函数;这些在客户端/本地运行。我也看到了每分钟要求服务器时间的功能（这似乎太频繁了）。

我想要做的是从AJAX调用中获取服务器的时间（我可以分配给变量;这部分我已经想到了）。并且让一个定时器函数使用来自该调用的变量作为起点增加秒，分钟等

这是一个关于这可能是什么样子的想法;首先，获取时间变量的AJAX调用。

function askTime(){
        $.ajax({
                url: "servertime.php",
                dataType: "json",
                cache: false,
                success: function(data) {
                    timeHours = (data.timeHours);
                    timeMinutes = (data.timeMinutes);
                    timeSeconds = (data.timeSeconds);
                    timerFunction();

                },
            });
    }

然后在该调用成功的情况下，运行将在某个id的div中显示时间的函数，如$('#timeDisplay).html(timestring)。

所以，很快：我怎样才能使用jQuery来显示使用不频繁的AJAX调用服务器时间的时间？

Answer 1

如果你想要一个从返回的时间开始的滴答时钟，我的建议是将你的时间值加载为数字，并在其中写入延迟。 jQuery有一个.delay()方法，它以毫秒为单位取值。像

这样的东西

function myTimer(hours, minutes, seconds)
{
   while(true)
   {
     //add one to seconds, if equal to 60, set to 0 and add one to minutes,
     //same for hours
     delay(1000);
   }
}

Answer 2

getTime是我在服务器端设置的Web方法，它返回JSON编码的日期时间（类似于/ Date（毫秒）/）。

您可能希望更改javascript的这一部分（成功回调中的第一行），具体取决于您从您的网络服务获取您的日期时间。

    var clientTimeUpdater = null;

    function askTime() {
        $.ajax({
            type: "POST",
            url: "WebForm1.aspx/getTime",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                var serverNowGetTime = msg.d.replace(/\/Date\(/, '').replace(/\)\//, '');
                var offset = (new Date()).getTime() - serverNowGetTime;
                clearInterval(clientTimeUpdater)

                // the client side updater
                clientTimeUpdater = setInterval(function () {
                    var serverNowGetTime = new Date((new Date()) - offset);
                    var hh = ('0' + serverNowGetTime.getHours()).slice(-2);
                    var mm = ('0' + serverNowGetTime.getMinutes()).slice(-2);
                    var ss = ('0' + serverNowGetTime.getSeconds()).slice(-2);
                    $("#myTime").text(hh + ':' + mm + ':' + ss);
                }, 1000);
            }
        });
    }

    $(document).ready(function () {
        // first call
        askTime();
        // call every 45 minutes
        setInterval(askTime, 2700000);
    })

Answer 3

我想我明白你希望实现的目标。

您可以使用setInterval()每秒更新一次（或左右）。定期（比如每分钟）时间将通过ajax调用与服务器同步。 ajax success处理程序将使用setTimeout发出下一个ajax请求。

var SYNC_INTERVAL = 60000;
var UPDATE_INTERVAL = 1000;

var $time = $('#time');

var serverOffset = 0;

function zeroPad(value) {
    return ('0' + value).slice(-2);
}

function updateTime() {
    var date = new Date(Date.now() + serverOffset);
    $time.text(zeroPad(date.getHours())
               + ':' + zeroPad(date.getMinutes())
               + ':' + zeroPad(date.getSeconds()));
}

function requestSyncWithServer() {
    $.ajax({
        type: 'get',
        url: 'servertime.php',
        dataType: 'json',
        success: function(date) {
            serverOffset = date - Date.now();
            updateTime();
            setTimeout(function() {
                requestSyncWithServer();
            }, SYNC_INTERVAL);
        }
    });
}

updateTime();
setInterval(function() { updateTime(); }, UPDATE_INTERVAL);
requestSyncWithServer();

jsfiddle demo

使用AJAX请求显示jQuery时间

3 个答案: