dynamic server time | 易学教程

问题

As I understand there is no way I can get dynamic server time in IE with settimeout() in script.. I found this example:

function  timeExam(){

    $.ajax({
    url : "inc/clock.php",
    success : function (data) {
    $("#clock_time").html(data);
    }
    });

           var func = function()
            {
                timeExam();
            }

            setTimeout(func, 1000);
    }


            <body onload="timeExam();">
                bla bla bla
            </body>

Maybe it is possible to make it work?

If not, could you please suggest me a dynamic clock with server time that works in all browsers?! I tried a clock with prototype.js but it conflicted with jquery UI in IE8(showed selectmenu incorrectly). I added that no conflict code to script but it was useless.. had to remove prototype.js

回答1:

What your script does is poll a script on your server at inc/clock.php and replace your #clock_time element's contents with the output from the script (roughly) every second. This should work, provided you have a element with id clock_element and a script at yoursite.tld/inc/clock.php

However, I disagree to constantly poll the server for it's current time. It should suffice to sync time only once to your webserver. Beside some minor differences this should keep your clocks synced well enough for a good while. If your webapp will run more than a couple of hours or days you should periodicly resync your clock (once a day or a week should do).

Use a Date object to keep track of the servertime on your client. Simply create a Date object from the output of clock.php (a valid date output as prerequisite) and update your clock_element periodicly (like every second) according to the time delta from when you synced your clock with the remote server.

Here some rough code, not tested, propably some syntax errors, but briefly shows what you should do:

function setupServerClock( clock_element, remote_time_url, remote_update_interval, local_update_interval ) {
    var w = window;
    // client time on resync
    var ct = new Date();
    // server time on resync
    var st = new Date();
    // setup resync
    w.setInterval( function() {
        jQuery.ajax( {
            url: remote_time_url,
            success: function (data) {
                ct = new Date();
                st = new Date(data);
            }
        });
    }, remote_update_interval);
    // setup local clock display
    w.setInterval( function() {
        // the time passed on our local machine since the last resync
        var delta = new Date() - ct;
        // we assume the same time passed at the server
        // (yeah, I know, spacetime might not be the same at the servers 
        // place and off the shelve clocks are pretty inaccurate)
        var clock = st - 0 + delta; // - 0 to convert to microsecond timestamp
        jQuery(clock_element).html(new Date(clock));
    }, local_update_interval);
}

Call it with something like:

setupServerClock( jQuery('#clock_element'), 'inc/clock.php', 1000 * 60 * 60, 1000 );

This will setup the clock to be written to #clock_element, using the value returned from yourdomain.tld/inc/clock.php, resync the clock every hour and update the local representation of the clock every second.

Oh and if that periodical resync indeed brings up "jumps" in the clock you could think about simply giving the user feedback, that his clock was updated, eg like this

    w.setInterval( function() {
        jQuery(clock_element).html('resyncing clock...');
        jQuery.ajax( {
            url: remote_time_url,
            success: function (data) {
                ct = new Date();
                st = new Date(data);
            }
        });
    }, remote_update_interval);

回答2:

Since you're using jQuery:

$(function() {
  var updateSeconds = 60;
  function updateClock() {
    $.ajax({
      url : "inc/clock.php",
      success : function (data) {
        $("#clock_time").html(data);
        setTimeout(updateClock, updateSeconds * 1000);
      }
    });
  }
  setTimeout(updateClock, updateSeconds * 1000);
});

Change "updateSeconds" however you want.

I did this with setTimeout instead of setInterval because it's a little safer. If there's a server problem, this one won't pile up doomed HTTP requests over and over again, because it doesn't set up a new update until the current one succeeds.

来源：https://stackoverflow.com/questions/4008512/dynamic-server-time

标签

javascript

dynamic

time