javascript计时器/持续时间在一段时间后给出错误的计算

Question

几天前，我发现了一个 javascript我认为我可以用它来计算用户登录时间的代码。但是在我的应用程序中测试后，我发现一段时间后时间有所不同。所以，我决定使用 chrome名为“Staying Alive for Google Chrome”的扩展名，它工作得很好“或者我希望......并且说实话，它有点好”，但之后我发现了与所附图片相同的问题。

这是 javscript 的代码我发现:

/*===============*/

var seconds = 0; 
var minutes = 0;
var hours = 0;
var t;

function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }

    $('#totalTime').html ( "" + (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds) );

    timer();
}

function timer() {
    t = setTimeout(add, 1000);
}
/*===============*/

所以，我希望有人能帮助我，如何让定时器正常运行，或者有更好的解决方案，因为我在这个页面中有6个以上的定时器..

P.S. 此应用程序使用 php 编码和 javascript我有一个 ajax在同一页面中每 5000 毫秒调用一次。

P.P.S. 我的一位 friend 建议 webworkers , 但我真的不太了解它。

非常感谢

Answer 1

由于 JavaScript 在浏览器中的单线程中执行，因此这种行为是意料之中的。基本上，setTimeout 和 setInterval 函数的延迟量应被视为最小值。

例如，如果您要执行一个导致大量 DOM 操作的函数，这可能会推迟回调的执行。

有关此主题的更多信息，请阅读 John Resig 的帖子 on the the execution order of JavaScript timers .

您 friend 的建议可以提供解决方案 WebWorkers在不同的线程中执行，因此不太容易阻塞 DOM 操作。但是，我建议您在服务器端处理时间计算。例如，通过在至少包含流的开始日期和时间的数据库中为流创建条目。然后:

1. 让您的 JavaScript 应用轮询服务器以同步时间
2. 或者，最好使用 WebSocket 设置流媒体连接.