JavaScript：这个计时器可靠吗？

发布于 2024-12-19 03:44:57 字数 951 浏览 1 评论 0原文

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

您还可以在我的网站。

原文

Today I was introduced to the world of Web Workers in JavaScript. This made me rethink about timers. I used to program timers the ugly way, like this.

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

I know this could be improved by saving the date when you start the timer, but I've never been a fan of that.

Now I came up with a method using Web Workers, I did a little benchmark and found it much more reliable. Since I am not an expert on JavaScript I would like to know if this function works correct or what problems it might have thanks in advance.

My JavaScript code (please note I use 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)
    };
};

The external script ('scripts/task.js'):

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

You can also view a live demo on my website.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

葬心 2024-12-26 03:44:57

如果您试图可靠地显示秒数，那么唯一可靠的方法是在开始时获取当前时间并仅使用计时器来更新屏幕。在每个刻度上，您都会获取当前时间，计算实际经过的秒数并显示出来。 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/

If you're trying to reliably display seconds ticking by, then the ONLY reliable way to do that is to get the current time at the start and use the timer ONLY for updating the screen. On each tick, you get the current time, compute the actual elapsed seconds and display that. Neither setTimeout() nor setInterval() are guaranteed or can be used for accurately counting time.

You can do it like this:

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

If the browser gets busy and timers are erratically spaced, you may get a slightly irregular update on screen, but the elapsed time will remain accurate when the screen is updated. Your method is susceptible to accumulating error in the elapsed time.

You can see this work here: http://jsfiddle.net/jfriend00/Gfwze/

回复收藏 0 原文