javascript setInterval-задержка обратного отсчета [закрыто]

Я использую этот код ниже для обратного отсчета в секундах. Проблема в том, что когда часть страницы, включая обратный отсчет, загружается снова с помощью jquery .загрузка, новый обратный отсчет становится неправильным : в каждую секунду мы видим быстрые 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>

Патрик

3 2
javascript setinterval countdown

3 ответа:

Вы должны использовать текущее системное время для отображения или вычисления того, сколько секунд прошло, а не делать свой собственный подсчет. 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/

8

Я добавил Это в скрипт jfriend00, чтобы получить 'minutes: secs': 

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

Добавлено к : Элем.innerHTML = минута (матем.раунд (cnt / 1000)); и документ.getElementById ("обратный отсчет").innerHTML = минута (секунды);

1

Спасибо вам всем.

Мне нужно было добавить ' clearInterval (ticker);' в начале функции startTimer.

0