자바스크립트 핵심컨샙33 #10. setTimeout, setInterval and requestAnimationFrame

1. setTimeout()

🔶 특정 시간이 경과한 뒤 코드를 한번 실행한다.

2. setInterval()

🔶 일정한 시간 간격으로 특정 코드를 반복적으로 실행한다.

3. requestAnimationFrame()

🔶 적절한 프레임 속도로 애니메이션을 실행시키면서, 브라우저가 다음 화면을 보여주기 전에 특정 코드블록을 실행한다.

저번에 포스팅했던 '메세지 큐와 이벤트 루프'에서 다뤘듯이 위 3개의 메서드는 '이벤트 루프'를 통하여 '비동기'적인 실행을 도와줍니다. 그리고 자바스크립트 자체 엔진이 아닌 브라우저와 Node.js에서 제공하는 API입니다.

1. setTimeout()

function fn(x, y) {
 console.log(x + y)
}

const setTime = setTimeout(fn, 2000, 1, 2);

setTime()//3

button.addEventListner('click', ()=>{ clearTimeout(setTime); })
//2초 지나기전 이거 누르면 setTime 종료

setTimeout()함수는 2번째 매개변수로 넘긴 숫자값의 시간이 지난 후 첫번째 매개변수로 넘긴 함수가 실행된다. 3번째 매개변수는 첫번째 매개변수 함수의 매개변수로 들어간다.

2번째 매개변수는 밀리세컨드(1000 == 1초)이다.

만약 setTimeOut이 실행되기전 clearTimeout()을 실행하면 clearTimeout()의 매개변수로 들어간 setTimeout 함수는 실행이 종료된다.

2. setInterval()

let i = 0;

const setInt = setInterval(()=>{
  	i += 1;
	console.log(`${i}번째 입니다.`)
}, 1000);//1번째 입니다. 2번째 입니다...

setInt();

button.addEventListner('click', ()=>{ clearTimeout(setInt) })

setInterval()함수는 일정 시간이 지난 후 코드를 한 번 실행해야 할 때 완벽하게 작동합니다. 즉 스택이 다 비워지고 최초로 실행될때 부터 정해준 값만큼 반복 진행을 합니다.

setInterval ()은 아무 조치를 취하지 않으면 끊임없이 계속 실행됩니다. 하지만 setTimeout()을 종료한것과 똑같이 clearTimeout()을 사용하면 멈춥니다.

❓만약

setTimeout(fn, 0) 이것처럼 0초로 설정하거나, 아무것도 안 적으면 어떻게 될까? 답은 그래도 비동기 실행이 진행된다. setTimeout같은 web API 비동기 콜백 함수들은 무조건 이벤트 루프를 통해 큐로 들어간다. setInterval도 같습니다.

3. requestAnimationFrame()

requestAnimationFrame ()은 브라우저에서 애니메이션을 효율적으로 실행하기 위해 만들어진 특수한 반복 함수입니다. setInterval ()의 최신 버전입니다. 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다.

이 메서드는 콜백을 인자로 받습니다. 콜백은 1초에 60번 작동합니다. 하지만 부드러운 애니매이션을 구현하는데에는 충분한 프레임입니다.

let cnt = 0;
let el = document.querySelector(".block");
el.style.left = "0px";

function func() {
  if (cnt > 300) return;
  count++;
  el.style.left = count + "px";
  requestAnimationFrame(func);
}

requestAnimationFrame(func);

requestAnimationFrame()은 setInterval()처럼 반복실행이 자동으로 안되기때문에 재귀함수를 통해서 호출하면 반복 실행이 됩니다. 위의 코드는 cnt가 300이 될때 까지 el를 오른쪽으로 움직이는 함수입니다. 주로 requestAnimationFrame()은 컨버스에서 많이 다루며 웹의 무한한 가능성을 보여주는 함수입니다.