타이머는 오랫동안 많은 사람들이 일상 업무에 사용하는 기능이었습니다. JavaScript 세계에서는 타이머가 setTimeout 또는 setInterval 함수로 구현되는 경우가 많습니다. 그렇게 하는 경우 나쁜 소식은 좋은 습관이 아니라는 점입니다. 그 이유를 설명하겠습니다.

내 생각을 설명하기 전에 질문이 있습니다. 시간을 잘못 알려주는 시계를 사용할 수 있나요?

당신의 대답이 '예'라면, 이 글은 당신의 것이 아니기 때문에 귀중한 시간을 낭비하게 되어 안타깝습니다.

반면, 귀하의 답변이 부정적이라면, setTimeout 또는 setInterval을 사용하는 것이 시간을 확인하기 위해 손상된 시계를 사용하는 것과 왜 같은지 설명하겠습니다.

이 기능의 문제점

시작하려면 다음 스니펫을 살펴보겠습니다.

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i 


브라우저 콘솔에서 이 스니펫을 실행하면 다음과 같은 결과가 표시됩니다. 



이 동작은 setTimeout이 브라우저 대기열에 콜백을 추가하여 유휴 상태일 때 콜백을 처리해야 하기 때문입니다.(할 작업이 없음) 즉, 콜백 setTimeout에 전달된 우선순위가 낮습니다

이제 이것을 알면 setTimeout 함수를 사용하여 타이머를 구현하는 것이 어려울 것이라고 생각합니다. 왜냐하면 동시에 2개 또는 심지어 10개의 틱(브라우저 사용량에 따라 다름)을 가질 수 있기 때문입니다. 디버깅하기에는 악몽이겠지만 더 나은 해결책이 있을까요?

  
  
  이러한 기능을 피하는 방법


타이머를 구현하는 더 나은 방법을 제공하려면 requestAnimationFrame 함수를 사용해야 합니다. 이는 다음 페인트 이전에 콜백을 실행하도록 브라우저에 지시하기 때문입니다.(즉, UI 변경이 발생하기 전)

여기서의 차이점은 매우 미묘하므로 코드를 통해 이해하는 것이 좋습니다. 이전 코드 조각을 다시 가져와서 setTimeout과 requestAnimationFrame을 비교하기 위해 약간 조정해 보겠습니다.

function testWithAnimationFrame() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


이 예에서는 Chrome에서 실행할 때 setTimeout이 requestAnimationFrame 전에 실행되는 것을 볼 수 있습니다. (드물게 그 반대의 경우도 발생하지만)



하지만 Firefox에서 실행하면 다음과 같은 결과가 나옵니다.



혼란스러워 보일 수 있지만 조금만 주의를 기울이면 실행 중에 페인팅이 발생하지 않는다는 것을 알 수 있으므로 이 시나리오를 처리하는 방법은 브라우저에 따라 다릅니다.

이제 브라우저가 페이지를 다시 그리도록 코드 조각을 조정할 수 있다면 어떤 일이 일어나는지 살펴보겠습니다.

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i 


Chrome의 출력은 다음과 같습니다.



다음은 Firefox의 출력입니다.



로그에서 볼 수 있듯이 브라우저가 UI를 변경할 때 requestAnimationFrame 함수는 항상 예약된 다른 콜백보다 우선순위를 갖습니다.

웹에서는 지속적으로 다시 그리기를 수행하므로 requestAnimationFrame은 타이머를 구현하기 위한 확실한 선택입니다.

  
  
  requestAnimationFrame 함수 이해


이 함수는 콜백만 매개변수로 사용합니다. 콜백에 컨텍스트를 제공하려면 페이지의 초기 렌더링 시간을 기준으로 이전 프레임이 종료된 시간을 나타내는 타임스탬프를 가져와야 합니다.

이 함수는 요청의 식별자를 나타내는 정수를 반환합니다. 이는 cancelAnimationFrame 함수를 사용하여 요청을 취소하려는 경우 유용할 수 있습니다.

  
  
  JavaScript로 스톱워치를 간단하게 구현


스톱워치를 구현하려면 몇 가지 요구 사항이 있습니다.

• 우리는 어느 시간 후에 틱이 표시되어야 하는지 알아야 합니다(일반적으로 1초).
• 스톱워치가 똑딱거리는 것을 멈춰야 하는 시간의 지연을 알아야 합니다.
• 틱 간격은 지연보다 작아야 합니다.

이러한 모든 요구 사항을 고려하여 다음 코드 조각은 스톱워치를 생성합니다.

아웃트로

길게 읽으셨겠지만 재미있게 읽으셨다고 믿습니다. 어쨌든 궁금한 점이 있거나 제안할 사항이 있으면 언제든지 연락해 주세요.

읽어주셔서 감사합니다. 안녕히 계세요?