JavaScript 개발자가 알아야할 33개 컨셉 10. setTimeout, setInterval and requestAnimationFrame

10.JavaScript 개발자가 알아야할 33개 컨셉 10. setTimeout, setInterval and requestAnimationFrame

1. setTimeout

set timeout은 자바스크립트에서 나온 개념이 아니라 브라우저와 노드js에서 가져온 개념이다. 

하는 일은 일정 시간이 흐른후에 함수를 실행시킬 때 사용한다.

좀더 세부적인 설명을 하자면, setTimeout은 시간이 지난 후에 기능을 메시지큐에 붙여준다.

함수를 자동으로 부르는 것이 아니라, 함수를 메시지 큐에 넣고, 스택이 비게되면, 자바스크립트가 실행하는 것이다.

바로 이뤄질 수도 있고, 자바스크립트가 바쁘면 천천히 실행 할 수도있다.. 그래서 time specific하다고 볼 수 없다.

 

사용법은 매우 간단하다. 첫번째 인자가 함수이고, 세번째 인자로 시간을 넣어주면된다.  3초 후 실행시킨다면 3000을 두번째 인자로 전달하면된다. 

 

기억해야 할 것은 저 3000(3초)이라는 숫자는 함수를 큐에 올리기 까지 최소한의 대기시간이며,

준비가되면 자바스크립트가 부르는 것이다.

즉, 확실한 시간이 아니고 브라우저 상황 자바스크립트 상황에 따라 지연이 될 수 있다.

하지만 뭐 그리 큰 지연은 아니니 무시해도 된다고한다..

 

setTimeout( () => console.log("Hi"), 3000)

setTimeout( console.log, 3000, 'Hi') 도 위와 동일하게 동작한다.

 

중요한 것은 우리가 직접 함수를 부르지 않고, 함수를 setTimeout에게 주고, 그 다음 setTimeout이 함수를 부르는 것이다.

---

그리고 떄로는 setTimeout에게 맏겨놓은 작업을 취소하고 싶을 때가 있다.

 

그럴때는 setTimeout을 변수 안에 넣으면 된다. 

 

timeout 변수에 setTimeout함수를 셋팅하고, console.log로 timeout함수를 실행시켜보면 숫자가 리턴되는데,

 선언한 timeout에 대한 ID 값이 리턴된 것이다. 

위 코드는 10초 후에 Hi를 출력하는 것이고, ID를 가지고 있는것을 확인할 수 있다.

 

생성한 타임아웃 작업을 취소하고 싶을 때는 clearTimeout에 해당 setTimeout변수를 셋팅해주면된다.

clearTimeout(timeout);

 

2. setInterval

일정 시간마다 함수를 실행시킬 때 사용하며, setTimeout과 동일한 인자를 사용한다. 

const timeout = setInterval(console.log, 10000, 'Hi');

이렇게 하면 10초 마다 Hi가 출력되는 것이다.

 

setInterval함수도 마찬가지로 clearInterval 함수에 변수를 인자로 넘겨줌으로써 실행을 종료시킬 수 있다.

clearInterval(timeout);

 

setTimeout과 setInterval모두 함수를 직접 사용하지 말고 함수의 이름을 넣어준다는 것이 중요하다.

그것들을 취소하고 싶을 때 clear을 이용하면 되기 때문이다.

 

3. requestAnimationFrame

 

이전에 화면에서 뭔가 움직이게 하려면 사람들은 setInterval을 사용했다. 

그러나 interval에 의지할 수 없고(time specific이 아니니까) 또한 CPU나 그래픽카드가 느리면 interval이 느려질 수 있다는 단점이 존재한다. 

그래서 requestAnimationFrame이 나온 것이라 한다.

 

requestAnimationFrame은 브라우저 화면이 렌더링 되기 전에 함수를 실행시키기 떄문에, 따로 시간 값을 인자로 넘길 필요가 없으며 오직 CallBack Fn만을 인자로 넘겨서 사용한다. 

애니메이션 작업을 많이 하지 않는이상 자주 쓸 일은 없는 함수이다..

const sayHi = () => {
	console.log('Hi');
    requestAnimationFrame(sayHi);
};

requestAnimationFrame(sayHi);

위 코드를 실행하면 Hi가 console에 아주 빠르게 출력이 되기 시작하고, 다른 탭으로 이동하면 크롬은 그걸 실행시키지 않는다. 해당 스크린을 리페인팅하는 것이 아니기 때문이다. 

다시 해당 탭으로 돌아가면 다시 실행이 시작되는 것을 확인 할 수 있다. 

 

무언가 최대한 빠르게 실행하고 싶을 때, requetAnimationFrame을 사용해보면 될것이다.