[React/JS] setTimeout, setInterval 은 전혀 "시계" 하지 않아 (setTimeout, setInterval 오류)

프로젝트에 삽입할 스톱워치 만들어 놓았다.

6초를 세어보는데 이상하게 체감 상 8초는 되는 것 같았다.

아 이거 이상한데??

 

1. setInetval을 활용한 타이머

1) 작성 코드

내가 작성한 코드는 setInterval을 이용하여 주기적으로 시간state를 증가시키는 방식이다.

const [run, setRun] = useState(); //스톱워치start상태
const [time, setTime] = useState(0); //시간state
const intervalRef = useRef();

//시작상태 감지
useEffect(()=>{
  if(props.start){
    setRun(true);
  }
  else{
    clearInterval(intervalRef.current)
    setRun(false);
  }
},[props.start])

//시간 증가 기능
useEffect(()=>{
  if(run){
    intervalRef.current = setInterval(() => {
      setTime(val=>val+10);
  },10);
}
},[run])

//일정 시간 지나면 stop & 런타임 정보 저장
useEffect(()=>{
  if(time == props.stop*1000+1){
    clearInterval(intervalRef.current)
    setRun(false);
  }
  else{
    props.setRunTime(time)
  }
})

 

이 방법을 이용하였을때 정확한 시간을 보장하지 않고 밀리는 현상이 일어났다.

 

2) 오류의 원인

setTimeout과 setInterval은 Web API 에서 별도로 실행된다.

따라서 비동기 작업이 가능한 것이다. (싱글스레드임에도 불구하고!)

하지만, 맞닥뜨렸던 것처럼 시간 지연 현상이 일어날 수 있다.

출처 : https://medium.com/@gemma.croad/understanding-the-javascript-runtime-environment-4dd8f52f6fca

 

위의 그림을 참고해 setTimeout, setInterval의 처리과정을 살펴보자.

1. Web API에 setInetval을 이용해 설정한 N ms의 시간이 지난 후 처리를 하라는 명령을 보내면

2. 해당 시간을 보낸 후 Callback Queue(Task Queue)에 보낸다.

3. 이후 Event Loop를 통해 Call Stack으로 이동하는데,

이때, Call Stack에서 이미 작업 중인 것이 존재한다면 처리를 기다린 후 이동하게된다.

따라서 설정한 시간 + 콜백 큐에서의 대기시간이 필요한 것이다.

 

때문에 항상 정확한 시간을 보장해주지 않는 방법인 것이다.

 

 

---

2. Date를 이용한 타이머

setInterval과 setTimeout의 delay에 영향을 받지 않는 타이머를 만드는 방법 중 하나는

Date를 이용하는 방법이다.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

시간을 추출할 때 사용하는 Date 중

Date.now()는 UTC 1970년 1월 1일 0시 0분 0초부터 함수를 호출한 현 시점까지 경과된 ms를 반환하는 함수이다.
이를 이용하여 경과 시간을 구하는 방법은 아래와 같다.

 

1_ 시작할 때 한 번 호출, 끝날때 한 번 호출

 

2_ 끝난 시간 - 시작 시간 = 경과시간

 

위 방법을 활용하여 타이머를 만들어볼 수 있다.

 

// 시작 버튼 -> 시작 상태 설정
const [start, setStart] = useState(false);
// 타이머 run 상태
const [run, setRun] = useState(false);
// 시작시간
let startTimeRef = useRef(null);
// 시간 state
const [seconds, setSeconds] = useState(0);
const [millseconds10, setMillseconds10] = useState(0);
const [milliseconds1, setMilliseconds1] = useState(0);

useEffect(()=>{
    if(start){
      timerPlay(); // 시작시간 저장 함수 호출
      setRun(true); // run 상태 설정
    }
    else{
      clearInterval(intervalRef.current)
      setRun(false);
    }
  },[start])

  useEffect(()=>{
    if(run){
      intervalRef.current = setInterval(() => {
        const now = new Date(Date.now() - startTimeRef.current);
        if(now.getTime() == stop*1000+1){ //설정한 시간 초과시 멈춤
          clearInterval(intervalRef.current)
          setRun(false);
        }
        else{
          setSeconds(now.getUTCSeconds()); //초
          setMillseconds10(now.getUTCMilliseconds().toString()[0]); //밀리
          setMilliseconds1(now.getUTCMilliseconds().toString()[1]); //밀리
        }
      },10);
    }
  },[run])
  
  // 시작 시간 설정 함수
  const timerPlay = ()=>{
    if (startTimeRef.current===null){startTimeRef.current = Date.now();}
  }