2013-01-06 2 views
1

Я использую этот код ниже для обратного отсчета в секундах. Проблема в том, что, когда часть страницы, включая обратный отсчет, снова загружается с использованием jquery .load, новый обратный отсчет становится неправильным: каждую секунду мы видим быстрые 2 секунды, например: 9-8 ... 7-6. ..5-4 ... как если бы он не синхронизировался с часами ... Смотрите там: aorbaroquethrash.com/test (для того, чтобы проблема произошла, мне нужно сменить песню, пока вы там)javascript setInterval - обратный отсчет отставания

Любая идея, как я могу это решить?

<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> 

Patrick

+0

Есть ли шанс, что скрипт присутствует дважды? –

+0

Хорошо ... сеть настроена на запись всего, моя звуковая карта отключена, теперь давайте просто подождать три минуты. –

+0

Я поменял песню – trogne

ответ

6

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

+0

'setInterval' не может дрейфовать на самом деле (но он может пропустить, если процессор сильно загружен - что хуже) –

+0

@JanDvorak - но если он не вызывается вовремя или прерывается перерыв, то код OP будет отображаться неверное время. – jfriend00

+0

ОК. Так что же тогда делать? – trogne

0

Благодаря всем вам.

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

1

Я добавил это в сценарий 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 = минута (сек);

Смежные вопросы