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/

Answer 2

我已将此添加到jfriend00脚本中以获取'minutes：secs'：

function minute(secs){
    minVar = Math.floor(secs/60);
    secs = secs % 60;
    if (secs < 10) {
        secs = "0"+secs;
    }
    return minVar+":"+secs;
}

添加到： elem.innerHTML =分钟（Math.round（cnt / 1000））; 和 document.getElementById（“countdown”）。innerHTML = minute（secs）;

Answer 3

谢谢大家。

我需要添加'clearInterval（自动收报机）;'在函数startTimer的开头。

javascript setInterval - 倒计时滞后

3 个答案: