집 > 기사 > 웹 프론트엔드 > setInterval 타이머_자바스크립트 기술이 부정확한 문제에 대한 해결 방법

setInterval 타이머_자바스크립트 기술이 부정확한 문제에 대한 해결 방법

WBOY원래의: 2016-05-16 16:49:102284검색

js에서 카운트다운, 타이밍 및 기타 기능에 setInterval을 사용하려는 경우 setInterval의 콜백 함수는 시간이 다 된 직후에 실행되지 않고 시스템 컴퓨팅 리소스가 유휴 상태가 된 후에 실행되기 때문에 정확하지 않은 경우가 많습니다. 그리고 다음 트리거인 Time은 setInterval 콜백 함수가 실행된 후 카운트를 시작하므로, setInterval 내에서 수행되는 계산에 시간이 너무 많이 걸리거나 시간이 많이 걸리는 다른 작업이 수행되는 경우 setInterval의 타이밍이 점점 부정확해지고 지연이 발생합니다.

다음 코드는 이 문제를 설명합니다

코드 복사 코드는 다음과 같습니다.

 
var startTime = new Date().getTime(); 
var count = 0 
//시간이 많이 걸리는 작업
setInterval(function(){ 
 var i = 0; 
while(i < 100000000); 
}, 0) 
setInterval(function(){ 
count ; 
console.log(new Date(). getTime() - (startTime count * 1000)) ; 
}, 1000); 

코드는 setInterval 트리거 시간과 올바른 트리거 시간이어야 하는 지연을 밀리초 단위로 출력합니다.

코드 복사 코드는 다음과 같습니다.

지연이 점점 심각해지는 것을 볼 수 있습니다.

js에서 상대적으로 정확한 타이밍 기능을 사용하려면

코드 복사 코드는 다음과 같습니다.

 
var startTime = new Date().getTime(); 
var count = 0; 
setInterval(function(){ 
var i = 0; 
while(i < 100000000 ); 
}, 0); 
function fix() { 
count ; 
var offset = new Date().getTime() - (startTime count * 1000); = 1000 - 오프셋; 
if (nextTime  setTimeout(fixed, nextTime) 

console.log(new Date().getTime() - (startTime count * 1000)); 
} 
setTimeout(fixed, 1000); 

 

코드에서는 1000에서 현재 시간과 정확한 시간의 차이를 뺍니다. , 사이클 시간)을 계산하여 현재 트리거 지연을 수정합니다.

아래는 출력입니다

코드 복사 코드는 다음과 같습니다.




























 ..... 

 

트리거 시간은 절대적으로 정확하지 않습니다. 각 트리거는 시간에 맞춰 수정되므로 오류가 누적되지 않습니다.

성명：

이전 기사：보유_javascript 기술에 소수점 이하 자릿수를 설정하려면 js를 사용하여 금액 형식을 지정하십시오.다음 기사：보유_javascript 기술에 소수점 이하 자릿수를 설정하려면 js를 사용하여 금액 형식을 지정하십시오.

setInterval 타이머_자바스크립트 기술이 부정확한 문제에 대한 해결 방법

관련 기사