10. setTimeout, setInterval 및 requestAnimationFrame

setTimeout , setInterval 및 requestAnimationFrame 는 통화 예약을 위한 가장 일반적인 3가지 API입니다.

SetTimeout 및 setInterval

정의

setTimeout : 주어진 시간 후에 기능을 한 번 실행할 수 있습니다.

- setInterval : 주어진 시간 이후부터 시작하여 일정 간격으로 계속 반복되는 함수를 반복적으로 실행할 수 있습니다.

setTimeout

통사론

setTimeout(callback, delay, arg1, arg2,...)

arg1, arg2,..의 매개변수는 선택사항입니다.

setTimeout을 호출하면 "타이머 식별자"가 반환됩니다timerId.
clearTimeout를 사용하여 실행을 취소할 수 있습니다. 매개변수로 주어진 콜백은 clearTimeout를 호출할 때까지 메모리에 남아 있습니다.

세트간격

구문의 대부분은 setTimeout 와 유사합니다. clearTimeout 대신 clearInterval 를 사용합니다.

주어진 시간 동안 반복 함수에 setInterval 및 setTimeout 사용

let timerId = setInterval(()=>alert('tick'), 2000);

setTimeout(()=>{clearInterval(timerId); alert('stop');}, 5000);

위 스니펫에서는 2초마다 'tick'을 인쇄하고 5초 후에 중지하도록 계획했습니다.

중첩된 setTimeout

반복 기능 예약의 경우 setInterval 에 대한 대안이 있습니다. 중첩된 setTimeout을 사용하고 있습니다. 장점은 실행 사이의 지연을 보다 정확하게 설정할 수 있다는 것입니다. 더 유연합니다.

let delay = 2000;
let timerId = setTimeout(function tick() {
  delay = 2000;
  console.log('tick');
  timerId = setTimeout(tick, 2000); // (*)
  const random = Math.random(0,1000);
  console.log(random)
  if(random%2 == 0) {
    delay = 1000;
  }
}, delay);

setInterval 대 중첩된 setTimeout

두 방법 모두 주어진 시간의 정확한 지연을 보장하지 않습니다.

세트간격

setInterval는 지정된 간격으로 함수를 호출합니다. 함수가 정확한 간격으로 STACK으로 전달된다는 것만 보장합니다. 예를 들어 주어진 간격이 1초라면 1초마다 함수가 호출된다는 뜻입니다.

이 메커니즘의 한 가지 큰 단점은 실행 간격을 보장하지 않는다는 것입니다. setInterval의 이전 함수 실행에 많은 시간이 걸리는 경우 setInterval의 콜백이 예기치 않게 실행될 수 있습니다.

중첩된 setTimeout

반면 중첩된 setTimeout은 메서드가 완전히 실행될 때까지 다른 실행을 위해 전송되지 않도록 보장합니다.

다른

반복되는 콜백을 처리하기 위한 또 다른 대안은 ayncsetInterval를 사용하는 것입니다.

const setIntervalAsync = (fn, ms) => {
  fn().then(() => {
    setTimeout(() => setIntervalAsync(fn, ms), ms);
  });
};

setIntervalAsync(() => fetch(/* blah */), 3000);

제로 지연 setTimeout

setTimeout의 간격을 0으로 설정하면 바로 실행되지 않는다. 그 이유는 setTimeout가 Web API 및 작업 대기열에 의해 처리된 후 스택으로 푸시되기 때문입니다. 따라서 현재 스크립트 '직후'로 예정되어 있습니다. 현재 스크립트가 끝나면 즉, 스택이 비어 있으면 실행됩니다.

requestAnimationFrame

requestAnimationFram는 javascript에서 반복되는 애니메이션 변경을 처리해야 할 때 사용됩니다.

requestAnimationFrame을 사용하는 이유는 무엇입니까?

setTimeout 및 setInterval 관련 문제

위에서 언급한 것처럼 애니메이션 사이의 간격이 일정하지 않습니다.

레이아웃 스래싱이 발생합니다. 레이아웃 스래싱은 사용자 화면이 변경 사항을 표시할 수 있기 전에 브라우저가 페이지의 불필요한 리플로우를 수행하도록 강제되는 경우입니다.

requestAnimationFrame의 이점

브라우저 및 하드웨어와 동기화되는 enxt 사용 가능한 화면 다시 그리기에서 코드를 실행할 수 있습니다. 더 부드러운 애니메이션을 만듭니다.

페이지가 비활성 탭에 있으면 애니메이션이 자동으로 중지되어 시스템 리소스가 절약됩니다.

배터리 친화적입니다.

통사론

requestAnimationFrame(callback)

화면이 다음 화면 다시 그리기를 수락할 준비가 되면 콜백을 실행합니다.
콜백 함수는 자동으로 통과timestamp하여 정확한 시간requestAnimationFrame이 호출되었음을 나타냅니다.requestAnimationFrame는 취소를 위해 cancelAnimationFrame에 전달할 수 있는 0이 아닌 정수를 반환합니다.

콜백 함수를 반복적으로 호출하려면 재귀적으로 사용해야 합니다.

function repeat(){
  // animation
   requestAnimationFrame(repeat);
}

requestAnimationFrame(repeat);