function initTimer(timeLeft) {
var Me = this,
TotalSeconds = 35,
Seconds = Math.floor(timeLeft);
var x = window.setInterval(function() {
var timer = Seconds;
if(timer === -1) { clearInterval(x); return; }
$('#div').html('00:' + (timer < 10 ? '0' + timer : timer));
Seconds--;
},1000);
}
我有这个代码。当此选项卡在浏览器中处于事件状态时,一切正常,但是当我更改选项卡并稍后返回选项卡时,就会出现问题。更准确地说,它错误地显示了时间。
我也尝试过 setTimeout,但问题是一样的。
我的一个想法是:HTML5 Web Workers...
但是还有另一个问题......浏览器支持。
有人可以帮忙解决这个问题吗? 如何编写 setInterval,即使选项卡未处于事件状态,它也能正常工作
最佳答案
使用Date
对象来计算时间。当您要求时,不要依赖计时器触发(它们不是实时的),因为您唯一的保证是它不会在您要求之前触发。它可能会很晚触发,特别是对于不活动的选项卡。尝试这样的事情:
function initTimer(periodInSeconds) {
var end = Date.now() + periodInSeconds * 1000;
var x = window.setInterval(function() {
var timeLeft = Math.floor((end - Date.now()) / 1000);
if(timeLeft < 0) { clearInterval(x); return; }
$('#div').html('00:' + (timeLeft < 10 ? '0' + timeLeft : timeLeft));
},200);
}
initTimer(10);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div"></div>
请注意,通过更频繁地检查它,我们可以确保它永远不会偏离太多。
关于当选项卡未处于事件状态时,Javascript setInterval 无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30872185/