js setInterval() 관련 질문입니다.
본문
var t = 0;
setInterval(() => $('#asdf').text(t++),1); // asdf라는 div태그가 있다는 가정하에
위 코드를 실행했는데,1초에 1000ms가 늘어나야하는게 1초에 약 200~300ms가 늘어납니다.
chrome 브라우저인데, 어케된건가요?
!-->
답변 3
해당 함수는 자바스크립트의 싱글스레드 특성상 정확한 시간에 실행하지 않고 근처값에 실행되고 또한 실행 중에도 지연 현상이 발생합니다.
시간값에 맞게 변화를 원하신다면 자바스크립트 시간 함수(date)를 이용하여 보정하시거나 표현하셔야 합니다.
https://wonism.github.io/set-interval-correction/
해당 사이트에서 관련 글을 참조해보세요
1000이 1초 입니다.
<script type="text/javascript">
//<![CDATA[
// 현재 시간 출력
function PrintTime() {
var today = new Date();
var hh = today.getHours();
var mi = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("result").innerHTML = hh + ":" + mi + ":" + ss;
}
// 중지를 위해 ID 보관
var timerId = null;
// 시계 시작
function StartClock() {
PrintTime();
timerId = setInterval(PrintTime, 1000);
}
// 시계 중지
function StopClock() {
if(timerId != null) {
clearInterval(timerId);
}
}
//]]>
</script>
<!-- 시계가 보여질 div -->
<div id="result"></div>
<input type="button" value="시작" onclick="StartClock();" />
<input type="button" value="중지" onclick="StopClock();" />
출처: https://offbyone.tistory.com/241 [쉬고 싶은 개발자]