我用 Javascript 创建了一个倒数计时器；它是成功的，期望未完成。事实上，从数学上讲，它是正确的，但是谷歌浏览器的浏览器设置“暂停”(因为没有更好的术语)SetInterval/Timeout，这意味着如果我的倒计时程序的用户在浏览器的选项卡之间切换，那么执行该功能不会恰好在设定的时间限制内发生。
我需要 W3School 帮助我实现这个基本时间逻辑: http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML =
h + ":" + m + ":" + s;
var t = setTimeout(startTime, 500);
}
function checkTime(i) {
if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
此尝试解释浏览器 SetInterval/Timeout 干扰:http://jsfiddle.net/7f6DX/31/
var div = $('div');
var a = 0;
var delay = (1000 / 30);
var now, before = new Date();
setInterval(function() {
now = new Date();
var elapsedTime = (now.getTime() - before.getTime());
if(elapsedTime > delay)
//Recover the motion lost while inactive.
a += Math.floor(elapsedTime/delay);
else
a++;
div.css("right", a);
before = new Date();
}, delay);
感谢您提供的任何帮助。
最佳答案
您应该使用真实世界时间来更新您的计时器，而不是依赖于 setInterval 的准确性。
您提供的 w3schools 示例正是这样做的；每 500 毫秒，它会抓取当前时间，对其进行格式化，并更新显示。当选项卡处于非事件状态时，此更新的发生频率可能低于 500 毫秒(Chrome 可以减慢到每 1-2 秒一次)，但是，当更新确实发生时，您将显示正确的信息。
// countdown for 1 minute
countdown(60);
function countdown(seconds) {
// current timestamp.
var now = new Date().getTime();
// target timestamp; we will compute the remaining time
// relative to this date.
var target = new Date(now + seconds * 1000);
// update frequency; note, this is flexible, and when the tab is
// inactive, there are no guarantees that the countdown will update
// at this frequency.
var update = 500;
var int = setInterval(function () {
// current timestamp
var now = new Date();
// remaining time, in seconds
var remaining = (target - now) / 1000;
// if done, alert
if (remaining < 0) {
clearInterval(int);
return;
}
// format
var minutes = ~~(remaining / 60);
var seconds = ~~(remaining % 60);
// display
document.getElementById("countdown").innerHTML
= format(minutes) + ":" + format(seconds);
}, update);
}
function format(num) {
return num < 10 ? "0" + num : num;
}<div id="countdown"></div>运行此代码段并切换到不同的选项卡。您的倒计时最多将关闭 500 毫秒(更新频率)。
就其值(value)而言，类似的想法可以应用于动画。
在设计动画时，您应该有一个位置 x 随时间 t 变化的公式。您的渲染时钟(无论是setInterval、setTimeout 还是requestAnimationFrame)不一定可靠，但是您的< em>物理时钟(真实世界时间)是。您应该将两者分离。
每次您需要渲染一帧时，引用时间t 的物理时钟，计算位置x，然后渲染该位置。 This是一篇非常棒的博文，其中详细介绍了动画和物理学，我从中借鉴了上述想法。
关于javascript - 创建一个倒数计时器(占 SetInterval/Timeout Google Chrome 选项卡 "error")，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33311935/