2

我在下面使用此代码以秒为单位进行倒计时。问题是，当使用 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>

帕特里克

4

3 回答 3

8

您应该使用当前系统时间来显示或计算已经过去的秒数，而不是自己计算。 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/

于 2013-01-06T21:21:14.513 回答
1

我已将此添加到 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 = minute(Math.round(cnt / 1000)); 和 document.getElementById("countdown").innerHTML = minute(secs);

于 2013-01-06T22:49:27.193 回答
0

谢谢大家。

我需要添加'clearInterval(ticker);' 在函数 startTimer 的开头。

于 2013-01-06T22:05:06.377 回答