创建一个倒计时计时器(SetInterval/Timeout谷歌Chrome标签"错误")

Create a countdown timer (that accounts for SetInterval/Timeout Google Chrome tab "error")

本文关键字：quot 谷歌 Chrome 标签 Timeout 错误 SetInterval 一个 倒计时 创建 计时器      更新时间：2023-09-26

我用Javascript创建了一个倒计时计时器;它是成功的，期望不是完整的。事实上，从数学上讲，这是正确的，但是Google Chrome的浏览器设置了"暂停"(因为没有更好的术语)SetInterval/Timeout，这意味着如果我的倒计时程序的用户在浏览器上切换选项卡，那么该函数的执行将不会在设定的时间限制内准确发生。

我需要帮助从W3Schools实现这个基本的时间逻辑: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毫秒获取一次当前时间，将其格式化，并更新显示。当标签处于非活动状态时，此更新的发生频率可能低于500ms (Chrome可以将其减慢到每1-2s一次)，但是，当更新发生时，您将显示正确的信息。

// 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>

运行这个代码片段并切换到不同的选项卡。您的倒计时将关闭最多500ms(更新频率)。

无论如何，类似的想法也可以应用到动画中。

在设计动画时，应该有一个位置x作为时间t的函数的公式。您的渲染时钟(无论是setInterval、setTimeout还是requestAnimationFrame)不一定是可靠的，但是您的物理时钟(真实世界的时间)是可靠的。你应该将两者解耦。

每次你需要渲染一个帧，查阅物理时钟的时间t，计算位置x，并渲染那个位置。这是一篇非常棒的博客文章，它非常详细地介绍了动画和物理，我借鉴了上面的想法。

相关文章：