너 setTimeout, setInterval 로 시간 보장한다고 할 수 있어? 어떻게?

타이머를 구현하다가 문득 그런 생각이 들었다.

아무 생각 없이 setTimeout 과 setInterval을 사용하면서 얘네는 어떻게 돌아가는거지?

얘네를 믿고 써도되는건가? 과연 setTimeout과 setInterval이 시간을 보장해주는 게 맞나?

그래서 공부하게 됐다.

 

 👀TL; DR

• setTimeout, setInterval의 차이점
• 지연 간격이 보장되나?
• 시간을 측정해야되는 타이머라면 Date가 해결책이 될수도..?

 

setTimeout

지정해준 시간이 지난 후에 1회 특정 코드를 실행하는 방법

비동기 함수

setTimeout이 비동기처리가 가능한 이유는 JS엔진이 아니라 WebAPI에서 처리를 한다.

이를 통해서 싱글스레드인 JS에서 비동기적인 처리가 가능하게 된다.

 

setInterval

지정해준 시간이 지날때마다(반복적으로) 특정 코드를 실행하는 방법

 

둘의 차이점

setTimeout(function(){
	console.log('setTimeout')
},1000)

setInterval(function(){
	console.log('setInterval')
},1000)

이 코드를 실행하면 아래 사진과 같이 출력된다.

 

이렇게 setTimeout은 1회 실행되는 반면에 setInterval은 주기마다 계속 실행이 되는 것을 확인 할 수 있다.

setInterval은 clearInterval하기 전까지는 계속해서 실행되기때문에 clear처리를 꼭 해줘야한다.

 

이제 중요한 것은 이 다음의 것이다.

바로

중첩 setTimeout은 지연 간격을 보장하지만, setInterval은 이를 보장하지 않는다는 점이다.

 

setInterval

setInterval은 지정 시간에 해당하는 주기마다 함수를 실행해준다.

기준이 시간이 되기때문에 중첩이 되었을 때, 시간 확보를 못해주는 것이다. -> func함수를 실행하는데 소모되는 시간도 포함시키기 때문에 지연 간격이 실제 작성한 간격보다 짧아지게 되는 것이다!!

setTimeout

 

그에 비해 setTimeout은 해당 함수가 끝나고 난 후에 다음 함수 호출에 대한 계획이 세워지기 때문에 지연 간격이 보장된다.

 

 

그런데, 이 외에도 지연 간격이 보장되지 않는다는 점을 유의해야한다.

아래와 같은 상황에서 브라우저 내 타이머가 느려지면 지연 간격이 보장되지 않습니다.

- CPU가 과부하 상태인 경우
- 브라우저 탭이 백그라운드 모드인 경우
- 노트북이 배터리에 의존해서 구동 중인 경우

 

이런 경우에는 지연이 많이 되기도 해서 시간을 측정하는 타이머를 만든다고 한다면 Date를 사용하는 게 오차범위가 훨씬 적어질 거다.

시작 시간과 정지 시간을 Date.now()로 불러와서 그 차이를 나타낼 수 있도록 한다면 되지 않을까?

Date.now()는 UTC 기준으로 1970년 1월 1일 0시 0분 0초부터 현재까지 경과된 밀리 초(Number)를 반환하는 함수입니다.

 

이런 경우에는 Web API에 의존하는 것 보다 국제시간 기준인 Date를 가지고 조작하는 게 더 정확성을 가져다 줄 것이라고 생각된다.

 

결론

시간 지연이 보장되지 않는다.

3분 타이머와 같은 흐름이라면 이 정확도가 크리티컬 하지 않을 수 있지만, 시간 측정이 메인 기능인 타이머라면 setTimeout, setInterval보다는 객관적인 Date를 사용해서 시간 차를 계산하여 측정을 하는게 더 좋지 않을까..?

---

출처

https://developer.mozilla.org/ko/docs/Web/API/setTimeout

https://developer.mozilla.org/ko/docs/Web/API/setInterval

https://ko.javascript.info/settimeout-setinterval#ref-28

https://ssocoit.tistory.com/249