비효율적 인 자바 스크립트 카운트 다운 타이머

나는 모든 시간 요소가 계산되는 js에서 매우 간단한 카운트 다운 타이머를 만들었습니다. 그것은 작동하며, 유일한 문제는 매초마다 계산이 이루어질 가능성이 가장 큰 문제입니다. 더 효율적으로 만드는 방법에 관한 어떤 생각?비효율적 인 자바 스크립트 카운트 다운 타이머

JS :

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

지체하지 브라우저에서 어떤 마크 업을 사용하지 않는 경우도 innerText와를 사용하는 것입니다 그것이 얼마나 정확하게 시간을 추적하는지에 대해 매우 신중합니다. 계산에 거의 시간이 걸리지 않습니다. – Pointy

지연의 원인은 비효율적 인 계산을 사용하는 것이 아니라 'setInterval'을 표류시키는 것입니다. [정확한 시간] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)을 사용하도록 변경하십시오. – Bergi

[javascript setInterval - countdown lagging] 가능한 중복 (http://stackoverflow.com/questions/14186771/javascript-setinterval-countdown-lagging) – Cilan

이보다 효율적으로 할 수있는 방법은 한 번만 돔을 검색하여 요소에 대한 참조를 유지하고, 당신이

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

비효율적 인 자바 스크립트 카운트 다운 타이머

답변

관련 문제