如何确保秒表功能在移动浏览器上继续运行？
如何确保秒表功能在移动浏览器上继续运行？
提问于 2018-09-04 21:25:44
我正试图通过构建某些东西来学习jQuery的基础知识，现在轮到我来看秒表了(它将被移动访问者使用)。
我现在有这样一个：码页
html
<span id="hours"></span> u |
<span id="minutes"></span> m |
<span id="seconds"></span> s
<button onclick="tickTock()">Start</button>js
function tickTock () {
var start = -1;
function pad(val) { return val > 9 ? val : "0" + val; }
setInterval(function () {
$("#seconds").html(pad(++start % 60));
$("#minutes").html(pad(parseInt(start / 60, 10) % 60));
$("#hours").html(pad(parseInt(start / 3600, 10)));
}, 1000);
}经过一段时间的测试后，我注意到在经过一段时间后，如果不关闭选项卡或浏览器，所显示的时间将不再正确。我希望在所显示的时间和已经过去的时间方面达到最大的可靠性。这种偏差似乎只出现在移动设备上。
因为我是初学者，我不知道从哪里开始。甚至可以使用js/jQuery吗？
如果你能为我指明正确的方向，我将不胜感激。
回答 2
Stack Overflow用户
发布于 2018-09-04 21:43:13
您的代码可以重新处理以存储开始时间，然后显示当前时间和开始时间之间的差异，而不是每秒钟手动递增一次。
这样，如果您的代码因为在后台而被搁置，那么将计算出正确的时间。
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);
}Stack Overflow用户
发布于 2018-09-04 21:43:17
设置的间隔仅为半准确，不能保证函数以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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52174183
复制相关文章
相似问题
腾讯云开发者
