4

今天我被介绍到 JavaScript 中的 Web Workers 的世界。这让我重新思考了计时器。我曾经以丑陋的方式对计时器进行编程，就像这样。

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    $("#timeI").html(time);
}

我知道这可以通过保存启动计时器的日期来改善，但我从来都不喜欢这样做。

现在我想出了一个使用 Web Workers 的方法，我做了一个小基准测试，发现它更可靠。由于我不是 JavaScript 方面的专家，我想知道这个函数是否正常工作或者它可能有什么问题提前感谢。

我的 JavaScript 代码（请注意我使用 JQuery）：

$(function() {
    //-- Timer using web worker. 
    var worker = new Worker('scripts/task.js'); //External script
    worker.onmessage = function(event) {    //Method called by external script
        $("#timeR").html(event.data)
    };
};

外部脚本（'scripts/task.js'）：

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    postMessage(time);
}
timerTick();

您还可以在我的网站上查看现场演示。

4

2 回答 2

11

如果您试图可靠地显示秒数，那么唯一可靠的方法是在开始时获取当前时间并仅使用计时器来更新屏幕。在每个滴答声上，您都会获得当前时间，计算实际经过的秒数并显示它。既setTimeout()不能setInterval()保证也不能用于准确计算时间。

你可以这样做：

var start = +(new Date);
setInterval(function() {
    var now = +(new Date);
    document.getElementById("time").innerHTML = Math.round((now - start)/1000);
}, 1000);

如果浏览器变得繁忙并且计时器间隔不规则，您可能会在屏幕上获得稍微不规则的更新，但在屏幕更新时经过的时间将保持准确。您的方法很容易在经过的时间内累积错误。

你可以在这里看到这项工作：http: //jsfiddle.net/jfriend00/Gfwze/

于 2011-11-30T20:43:40.747 回答
0

最准确的计时器将是两个时间戳的比较。您可以通过更频繁地更新（例如每 100 毫秒）来提高计时器的精度。我更喜欢使用setInterval()over setTimeout()。

于 2011-11-30T20:44:11.517 回答