个人中心
gpt4 book ai didi

javascript - 创建一个倒数计时器(占 SetInterval/Timeout Google Chrome 选项卡 "error")

转载 作者：行者123 更新时间：2023-11-30 16:31:06 27 4
gpt4 key购买 nike

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

27 4 0
文章推荐： c# - 表达式 : a get-by-ID-selector when I have the Expression to get the ID?
文章推荐： c - DSNAME 长度无效的 IBM Window Services (DWS) CSRIDAC
文章推荐： c# - token facebook-c#-sdk 的交换代码
文章推荐： c - C 宏中的函数定义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com