-->

的JavaScript的setInterval - 倒计时滞后(闭合)(javascript se

2019-08-05 19:28发布

我用下面这段代码,以秒倒计时。 问题是,当包括倒计时页面的一部分被加载再次使用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()不能保证按时完美打来电话,你有可能得到积累错误,当你算了算自己,你会显示错误的时间,如果它不叫上的时间。

记录您countingand上启动,然后在每个刻度的时间,得到新的系统时间,并计算出多少时间,因为你开始没有积累误差计算已过。


另外,请不要传字符串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剧本获得“分钟:秒”:

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( “倒计时”)的innerHTML =分钟(秒)。



Answer 3:

感谢大家。

我需要做的添加“clearInterval(股票);” 在功能startTimer所的开始。



文章来源: javascript setInterval - countdown lagging [closed]