집 >웹 프론트엔드 >JS 튜토리얼 >시간 초과를 설정할 필요가 없습니다.

시간 초과를 설정할 필요가 없습니다.

WBOY원래의: 2024-08-12 19:02:36701검색

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

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

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

반면에 부정적인 대답이라면 setTimeout이나 setInterval을 사용하는 것이 왜 손상된 시계를 사용하여 시간을 확인하는 것과 같은지 설명하겠습니다.

이 기능의 문제점

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

 function test() {
   let i = 0;
   setTimeout(() => console.log("hello"), 0);
   while (i < 5) {
     console.log("number ", i);
     i += 1;
  }
  console.log("world");

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

You don&#t need to set the time-out

이 동작은 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 < 5) {
    console.log("number ", i);
    i += 1;
  }
  console.log("world");
}

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

You don&#t need to set the time-out

하지만 Firefox에서 실행하면 이런 결과가 나옵니다

You don&#t need to set the time-out

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

이제 브라우저가 페이지를 다시 그리도록 스니펫을 조정할 수 있다면 무슨 일이 일어나는지 살펴보겠습니다

function testWithAnimationFrame2() {
  let i = 0;
  setTimeout(() => console.log("hello"), 0);
  requestAnimationFrame(() => console.log("tell me the next paint"));
  while (i < 5) {
    console.log("number ", i);
    i += 1;
    document.body.style.backgroundColor = "red";
  }
  console.log("world");
}

Chrome에서의 출력은 다음과 같습니다

You don