Javascript 如何确保秒表功能在移动浏览器上持续运行

我试图通过构建某些东西来学习jQuery的基础知识，现在轮到我使用秒表了（移动访问者将使用秒表）

我目前有：

html

<span id="hours"></span> u | 
<span id="minutes"></span> m | 
<span id="seconds"></span> s
<button onclick="tickTock()">Start</button>

经过一段时间的测试，我发现在一段时间后，如果不关闭选项卡或浏览器，显示的时间将不再正确。我希望在显示的时间和经过的时间方面实现最大的可靠性。这种偏差似乎只出现在移动设备上

因为我是初学者，我不知道从哪里开始。甚至可以使用js/jQuery吗

---

如果你能为我指出正确的方向，我将不胜感激

可以修改代码以存储开始时间，然后显示当前时间和开始时间之间的差异，而不是每秒手动递增

这样，如果您的代码因为在后台而被搁置，那么将计算出正确的时间

function tickTock () {

    var startTime = new Date();

    function pad(val) { return val > 9 ? val : "0" + val; }

    setInterval(function () {
        var currTime = new Date();
        var elapsedMs = currTime.getTime() - startTime.getTime();
        var elapsedSeconds = elapsedMs * 1000;
        $("#seconds").html(pad(elapsedSeconds % 60));
        $("#minutes").html(pad(parseInt(elapsedSeconds / 60, 10) % 60));
        $("#hours").html(pad(parseInt(elapsedSeconds / 3600, 10)));
    }, 1000);
}

---

可以修改代码以存储开始时间，然后显示当前时间和开始时间之间的差异，而不是每秒手动递增

这样，如果您的代码因为在后台而被搁置，那么将计算出正确的时间

function tickTock () {

    var startTime = new Date();

    function pad(val) { return val > 9 ? val : "0" + val; }

    setInterval(function () {
        var currTime = new Date();
        var elapsedMs = currTime.getTime() - startTime.getTime();
        var elapsedSeconds = elapsedMs * 1000;
        $("#seconds").html(pad(elapsedSeconds % 60));
        $("#minutes").html(pad(parseInt(elapsedSeconds / 60, 10) % 60));
        $("#hours").html(pad(parseInt(elapsedSeconds / 3600, 10)));
    }, 1000);
}

---

设置的间隔只是半精确的，不能保证函数以1秒的间隔精确运行。您可以先获取函数启动时的时间戳，然后使用ticktock函数从当前时间戳中减去上一个时间戳，然后对ui执行必要的更新。我将保留填充和四舍五入，以使示例易于理解

function ticktock(){
  var start = new Date().valueOf();

  setInterval(function(){
    var now = new Date().valueOf();
    var elapsed = (now - start) / 1000;

    var seconds = elapsed % 60;
    var minutes = (elapsed / 60) % (60);
    var hours = (elapsed / (60 * 60)) % (60);

    $("#seconds").html(seconds);
    $("#minutes").html(minutes);
    $("#hours").html(hours);

  }, 1000);
}

---

设置的间隔只是半精确的，不能保证函数以1秒的间隔精确运行。您可以先获取函数启动时的时间戳，然后使用ticktock函数从当前时间戳中减去上一个时间戳，然后对ui执行必要的更新。我将保留填充和四舍五入，以使示例易于理解

function ticktock(){
  var start = new Date().valueOf();

  setInterval(function(){
    var now = new Date().valueOf();
    var elapsed = (now - start) / 1000;

    var seconds = elapsed % 60;
    var minutes = (elapsed / 60) % (60);
    var hours = (elapsed / (60 * 60)) % (60);

    $("#seconds").html(seconds);
    $("#minutes").html(minutes);
    $("#hours").html(hours);

  }, 1000);
}

---

我不确定我是否真的理解你的问题，但如果问题是计时，为什么不偶尔调用getTime（）并根据需要校准秒表？

setInterval

不够精确，无法在这样长的时间内用作计时设备。@DCR这更有意义，我的坏@Carcigenicat我不知道，谢谢。我不确定我是否真的理解你的问题，但如果问题是保持时间，为什么不每隔一段时间调用getTime（）并根据需要校准秒表？

setInterval

不够精确，无法在这样的长时间内用作计时设备。@DCR这更有意义，我的错@Carcigenicate我不想知道，谢谢。jinx:）我们差不多在同一时间发布了。非常感谢你明确的回答！正如我对Harry所说的，比较你的函数对我来说是一个真正的教训，可以澄清很多事情。jinx:）我们差不多在同一时间发布了。非常感谢你明确的回答！正如我对Harry说的，比较你的函数对我来说是一个真正的教训，可以澄清很多事情。非常感谢你明确的回答Harry！我一直在努力将秒/分/小时存储为变量，这就是为什么我认为我不能再进一步了。将你的函数结构与我的函数结构进行比较对我来说将是一个真正的教训，可以澄清很多事情。非常感谢你明确的回答Harry！我一直在努力将秒/分/小时存储为变量，这就是为什么我认为我不能再进一步了。将你的函数结构与我的函数结构进行比较，对我来说将是一个真正的教训，可以澄清很多事情。