Неэффективный таймер обратного отсчета javascript

Я создал очень простой таймер обратного отсчета в js, который вычисляется каждый элемент времени. Это работает, единственная проблема с этим - существует отставание, которое, скорее всего, вызвано вычислениями, производимыми каждую секунду. Любые мысли о том, как сделать это более эффективным?Неэффективный таймер обратного отсчета javascript

ЯШ:

var count = 55010; //needs to be in seconds 
var counter = setInterval(timer, 1000); //1000 will run it every 1 second 
function timer(){ 
    count = count-1; 
    if (count <= -1){ 
    clearInterval(counter); 
    return; 
    } 
    document.getElementById("hour10").innerHTML=Math.floor(((count/86400)%1)*2.4); 
    document.getElementById("hour1").innerHTML=Math.floor(((count/86400)%1)*24)-(Math.floor(((count/86400)%1)*2.4))*10; 
    document.getElementById("min10").innerHTML=Math.floor(((count/3600)%1)*6); 
    document.getElementById("min1").innerHTML = Math.floor(((count/3600)%1)*60)-(Math.floor(((count/3600)%1)*6))*10; 
    document.getElementById("sec10").innerHTML = Math.floor(((count/60)%1)*6); 
    document.getElementById("sec1").innerHTML = Math.floor(((count/60)%1)*60)-(Math.floor(((count/60)%1)*6))*10; 
}

HTML:

<span id="hour10">0</span> 
<span id="hour1">0</span> : 
<span id="min10">0</span> 
<span id="min1">0</span> : 
<span id="sec10">0</span> 
<span id="sec1">0</span>

Причина я создал таймер в этой моде, потому что я хочу, чтобы поместить каждый элемент в сНу контейнер таким образом:

enter image description here

Заранее спасибо!

источник

2014-01-15 Rob

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

Причина отставания заключается не в использовании неэффективных вычислений, а в дрейфующем 'setInterval'. Просто измените его, чтобы использовать [точное время] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date). – Bergi

Возможный дубликат [javascript setInterval - обратный отсчет времени] (http://stackoverflow.com/questions/14186771/javascript-setinterval-countdown-lagging) – Cilan

Способ сделать это более эффективным, чтобы сохранить ссылку на элементы лишь поиск в Dom один раз, а также использовать InnerText, если вы не используете какие-либо разметки

var count = 55010; //needs to be in seconds 
var counter = setInterval(timer, 1000); //1000 will run it every 1 second 
var elHour10 = document.getElementById("hour10"); 
var elHour1 = document.getElementById("hour1"); 
var elMin1 = document.getElementById("min10"); 
var elSec10 = document.getElementById("sec10"); 
var elSec1 = document.getElementById("sec1"); 

function timer(){ 
    count = count-1; 
    if (count <= -1){ 
    clearInterval(counter); 

    return; 
    } 
    elHour10.innerText=Math.floor(((count/86400)%1)*2.4); 
    elHour1.innerText=Math.floor(((count/86400)%1)*24)-(Math.floor(((count/86400)%1)*2.4))*10; 
    elMin10.innerText=Math.floor(((count/3600)%1)*6); 
    elMin1.innerText = Math.floor(((count/3600)%1)*60)-(Math.floor(((count/3600)%1)*6))*10; 
    elSec10.innerText = Math.floor(((count/60)%1)*6); 
    elSec1.innerText = Math.floor(((count/60)%1)*60)-(Math.floor(((count/60)%1)*6))*10; 
}

источник

2014-01-15 22:33:38

Неэффективный таймер обратного отсчета javascript

ответ

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