Question

我有一个问题，我的脖子有时间间隔。我用下面的函数一次计算一次我的时间/时钟。

Header.prototype= {

 time_changed : function(time){
        var that = this;
        var clock_handle;
        var clock = $('#gmtclock');

        that.time_now = time;
        var increase_time_by = function(interval) {
            that.time_now += interval;
        };
        var update_time = function() {
             clock.html(moment(that.time_now).utc().format("YYYY-MM-DD HH:mm") + " GMT");
        };
        update_time();

        clearInterval(clock_handle);

        clock_handle = setInterval(function() {
            increase_time_by(1000);
            update_time();
        }, 1000);

    },
};

以上工作正常，一次正确地增加我的时间。然而。我添加了另一个在Web上触发更改或标签导航的事件。

var start_time;
        var tabChanged = function() {
            if(clock_started === true){
                if (document.hidden || document.webkitHidden) {
                    start_time = moment().valueOf();
                    time_now = page.header.time_now;
                }else {
                    var tnow = (time_now + (moment().valueOf() - start_time));
                    page.header.time_changed(tnow);
                }
            }
        };

        if (typeof document.webkitHidden !== 'undefined') {
            if (document.addEventListener) {
                document.addEventListener("webkitvisibilitychange", tabChanged);
            }
        }

当用户离开页面并返回时，上述情况会发生。它增加了时间的延迟。但是，我注意到第二次迅速增加。并且我的计时器不再按照时钟指针中的指示再次点火。它每毫秒和脂肪增加第二。请问为什么这个以及如何解决这个问题？当我改变标签并返回时，我的时间快速前进。任何帮助将不胜感激

更新

以下是我的WS请求功能。

Header.prototype = {

    start_clock_ws : function(){
            var that = this;

            function init(){
                clock_started = true;
                WS.send({ "time": 1,"passthrough":{"client_time" :  moment().valueOf()}});
            }
            that.run = function(){
                setInterval(init, 900000);
            };

            init();
            that.run();

            return;
        },
        time_counter : function(response){
            var that = this;
            var clock_handle;
            var clock = $('#gmt-clock');
            var start_timestamp = response.time;
            var pass = response.echo_req.passthrough.client_time;

            that.time_now = ((start_timestamp * 1000) + (moment().valueOf() - pass));

            var increase_time = function() {
                that.time_now += (moment().valueOf() - that.time_now);
            };
            var update_time = function() {
                 clock.html(moment(that.time_now).utc().format("YYYY-MM-DD HH:mm") + " GMT");
            };
            update_time();

            clearInterval(clock_handle);

            clock_handle = setInterval(function() {
                increase_time();
                update_time();
            }, 500);
        },

    };

并在我的WS开放活动中

if(isReady()=== true){
       if (clock_started === false) {
           page.header.start_clock_ws();
      }
   }

在我的WS onmessage活动中

if(type ==='time'){
   page.header.time_counter(response);
}

根据您的建议，我将increase_time_by修改为

var increase_time_by = function() {
      that.time_now += (moment().valueOf() - that.time_now);
   };

现在看起来很好。会进一步测试并看到。

Answer 1

不是通过间隔值递增时钟，而是每次通过时将时钟更新为当前时间。然后，如果你将完全分开1000毫秒，那就无所谓了。

实际上，您可能希望经常运行 more ，例如每500毫秒，以便更顺畅地感受时钟滴答声。

基本上，它归结为定时器功能的精确度，或缺乏定时器功能。有关StackOverflow的大量问题 - 例如this one。

根据您的评论，我相信您正在尝试根据来自网络服务的起始值显示UTC时间的滴答时钟。这将是这样的：

var time_from_ws = // ... however you want to retrieve it
var delta = moment().diff(time_from_ws);  // the difference between server and client time

// define a function to update the clock
var update_time = function() {
    clock.html(moment.utc().subtract(delta).format("YYYY-MM-DD HH:mm") + " GMT");
};

update_time(); // set it the first time
setInterval(update_time, 500); // get the clock ticking

时间间隔秒在标签上快速运行Javascript

1 个答案: