javascript - 时间间隔秒在选项卡更改Javascript上运行得很快

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);

    },
};

上面的方法工作正常，并且可以正确地一次增加我的时间一秒。然而。我添加了另一个在网络更改或选项卡导航时触发的事件。

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 毫秒精确触发一次并不重要。

您实际上可能希望更频繁地运行，例如每 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