定时器JavaScript未在Chrome&最小化窗口时的Mozilla

Timer JavaScript not running in Chrome & Mozilla when window minimized

本文关键字:窗口 最小化 Mozilla amp JavaScript 未在 Chrome 定时器      更新时间:2023-09-26

嗨,我使用的是Java脚本计时器,它在IE中运行良好,但在Chrome中,当窗口最小化时,它会变得太慢,在Mozilla中,它会停止计时器。有人能提出什么建议吗?我的代码如下:-

<html>
<head>
<script>
var millisec = 0;
var seconds = 0;
var timer;
function display(){
  if (millisec>=9){
     millisec=0
     seconds+=1
  }
  else
     millisec+=1
     document.d.d2.value = seconds + "." + millisec;
     timer = setTimeout("display()",100);
  }
function starttimer() {
  if (timer > 0) {
    return;
  }
  display();    
}
function stoptimer() {
  clearTimeout(timer);
  timer = 0;
}
function startstoptimer() {
  if (timer > 0) {
     clearTimeout(timer);
     timer = 0;
  } else {
     display();
  }
}
function resettimer() {
    stoptimer();
    millisec = 0;
    seconds = 0;
}

</script>
</head>
<body>
<h5>Millisecond Javascript Timer</h5>
<form name="d">
<input type="text" size="8" name="d2">
<input type="button" value="Start/Stop" onclick="startstoptimer()">
<input type="reset" onclick="resettimer()">
</form>
</body></html>

您不能使用setTimeout来制作可靠的计时脚本。

John Resig解释了JavaScript计时器的工作原理:http://ejohn.org/blog/how-javascript-timers-work/

简短的版本是总是有一个小的延迟。传递给setTimeout的毫秒参数是"尽力而为"


如果你想显示实时计时器,可以考虑经常轮询时间。如果事件循环速度减慢,则不会影响您跟踪时间的能力,只会减少更新。

http://jsfiddle.net/64pcr7pw/

<script type="text/javascript">
var timer, time = 0, start_time = 0;
function startstoptimer() {
    if (timer) {
        time += new Date().getTime() - start_time;
        start_time = 0;
        clearInterval(timer);
        timer = null;
    } else {
        start_time = new Date().getTime();
        timer = setInterval(function () {
            document.d.d2.value = time + new Date().getTime() - start_time;
        }, 10);
    }
}
function resettimer() {
    time = 0;
    start_time = new Date().getTime();
    document.d.d2.value = "0";
}
</script>
<form name="d">
    <input type="text" size="8" name="d2"/>
    <input type="button" value="Start/Stop" onclick="startstoptimer()"/>
    <input type="reset" onclick="resettimer()" />
</form>