JavaScript:这个计时器可靠吗？

Question

今天,我被介绍到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();

您还可以在我的网站上观看现场演示.

Answer 1

如果您正在尝试可靠地显示秒数,那么唯一可行的方法是在开始时获取当前时间并仅使用计时器来更新屏幕.在每个刻度线上,您将获得当前时间,计算实际经过的秒数并显示该时间.既不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/