javascript setInterval - 倒计时滞后

Question

我使用下面的代码在几秒钟内倒计时.问题是,当使用jquery .load再次加载包含倒计时的页面部分时,新的倒计时会出错:每隔一秒,我们会看到快速的2秒,如下所示:9-8 ... 7-6. ..5-4 ......就好像它与时钟不同步......在那里看到:aorbaroquethrash.com/test(为了解决问题,我必须在你那里换歌)

知道如何解决这个问题吗？

<script type = "text/javascript">
/*author Philip M. 2010*/

var timeInSecs;
var ticker;

function startTimer(secs){
timeInSecs = parseInt(secs)-1;
ticker = setInterval("tick()",1000);   // every second
}

function tick() {
var secs = timeInSecs;
if (secs>0) {
timeInSecs--;
}
else {
clearInterval(ticker); // stop counting at zero
}

document.getElementById("countdown").innerHTML = secs;
} 
startTimer(<?php echo $stream['info']['length'];?>);

</script>

帕特里克

Answer 1

您应该使用当前系统时间来显示或计算已经过了多少秒而不是自己计算. setInterval()不能保证按时完美调用,当你计算自己时,你可能会累积错误,如果没有按时调用,你会显示错误的时间.

记录开始计数的时间,然后记录每个滴答,获取新的系统时间并计算自开始计数以来没有累积错误的时间.

另外,请不要传递字符串setInterval().传递一个真正的函数引用,因为这可以防止范围问题和其他潜在的问题.

以下是倒数计时器工作代码的示例:

var startTime, countAmt, interval;

function now() {
  return ((new Date()).getTime());
}

function tick() {
  var elapsed = now() - startTime;
  var cnt = countAmt - elapsed;
  var elem = document.getElementById("counter");
  if (cnt > 0) {
    elem.innerHTML = Math.round(cnt / 1000);
  } else {
    elem.innerHTML = "0";
    clearInterval(interval);
  }
}

function startTimer(secs) {
  clearInterval(interval);
  document.getElementById("counter").innerHTML = secs;
  countAmt = secs * 1000;
  startTime = now();
  interval = setInterval(tick, 1000);  
}

startTimer(20);

工作演示:http://jsfiddle.net/jfriend00/mxntj/