타이밍 제어

setTimeout

setTimeout은 첫번째 인자로 함수를 받고 두번째 인자로 ms단위의 시간 값을 받는데

ms시간 만큼 지난 뒤에 콜백 함수를 실행시키는 함수이다

setTimeout(function () {
    console.log('setTime');
},3000);

이 코드를 실행하면 3초후에 콜백 함수가 실행되어 콘솔창에 setTime이 출력된다

setInterval

setInterval도 setTimeout과 작동 방식이 유사한데

똑같이 함수와 ms단위의 시간을 받고 ms시간마다 콜백 함수를 실행시키는 함수이다

setInterval(function () {
    console.log('setInterval');
}, 3000);

이 코드를 실행하면 3초마다 콜백 함수가 실행되어 콘솔창에 setInterval이 반복 출력된다

---

이 두함수는 유사한점이 굉장히 많은데

둘다 정수를 timeoutID라 불리는 정수값을 반환한다는 것

이 둘의 timeoutID 공간은 서로 공유되고 있는데 이게 무슨 뜻이냐면

let id = setInterval(test,1000);
let id2 = setTimeout(test,1000);
let id3 = setInterval(test,1000);
let id4 = setTimeout(test,1000);
console.log(id,id2,id3,id4);

순서대로 id,id2,id3,id4의 ID값

마치 인덱스가 2부터 시작인 배열 공간에 선언한 순서대로 인덱스가 부여되는 것 같은 느낌이다

이 timeoutID 값들은 해당 id를 가진 함수들을 제어하는데 사용되는데

clearInterval과 clearTimeout 함수를 이용한다

let id = setInterval(test,1000);
let id2 = setTimeout(test,1000);
let id3 = setInterval(test,1000);
let id4 = setTimeout(test,1000);

clearTimeout(id2);
clearTimeout(id4);
clearInterval(id);
clearInterval(id3);

원래는 조건문이나 더 복잡한 조건을걸어서 사용하지만 지금은 간단하게 써봤다

이렇게 사용하면 콘솔창에는 아무것도 출력되지 않는다

requestAnimationFrame(rAF)

setInterval과 비슷한 함수지만 다른점이 몇가지 있다면

스스로 재귀호출을 하지 않는다는 것, 그리고 성능이 더 좋다는 것

성능이 좋다는 부분은 인터넷에 여러글을 찾아봤는데 내가 알 수 없는 용어들로 효율적이라고 설명하고 있다

아직 내가 제대로된 개발을 하지 않아서 이해를 못 하는 것일수도..

• 프레임 단위로 그리는 것을 목표로 한다 (1초에 60번)
• 백그라운드 실행
• 정확한 시간에 실행

와! 하고 딱 와닿는게 없다..

setInterval보다 좋다고 하니 setInterval 대신 사용하려고 노력해봐야겠다

function test() {
    console.log('rAF');

    requestAnimationFrame(test);
}
test();

매우 간단한 사용 코드

rAF는 스스로 재귀호출하지 않기 때문에 직접 재귀호출식으로 코드를 짜주어야한다

setInterval과 같이 무한 출력

이 함수도 위 두 함수와 같이 반환값이 id값인데

let rAFId;
function test() {
    console.log('rAF');

    rAFId = requestAnimationFrame(test);
}
test();

cancelAnimationFrame(rAFId);

마찬가지로 재귀를 취소하기위해서 사용된다

rAF는 조금 더 사용하고 공부해 보면서 다음에 한번 더 포스팅해 봐야겠다