인터랙티브 웹 개발 제대로 시작하기-타이밍 제어하기

setTimeout, setInterval은 자바스크립트 명세서에서는 명시되어있지 않지만,
대부분의 브라우저와 Node.js를 포함한 자바스크립트 호스트 환경 대부분이 유사한 메소드와 내부 스케줄러를 제공하고 있습니다.

 

자바스크립트에서 일정 시간이 지난 후에 원하는 함수를 실행할 수 있도록 하는 것을 '호출 스케줄링'이라고 합니다.

이 호출 스케줄링은 setTimeout과 setInterval의  두 가지 방법으로 구현이 가능하고, 단위는 밀리초(millisecond, 1000밀리초 = 1초)입니다. 

이 중 setTimeout()은 자바스크립트 함수 중에서도 자주 사용되는 타이머 함수입니다.

 

 

setTimeout

setTimeout((function(){ // Code here }, delay);

setTimeout()은 일정 시간이 흐른 뒤에 함수를 의도적으로 지연시킨 뒤 실행할 수 있습니다. 이 함수는 두 개의 인자를 설정하여 사용합니다.

 

1. 호출될 콜백함수
2. 지연시간(delay time)

 

setTimeout()을 활용 방법은 접속 후 팝업 또는 배너창 띄우기, eventListener로 애니메이션 실행 등등 다양한 케이스가 존재합니다. 특히 인터랙티브 웹에서는 setTimeout()은 자주 사용됩니다.

 

let timeId;

function sample() {
	console.log("sample!");
    }
    
    timeId = setTimeout(sample, 3000);

 

위의 코드를 실행시키면, Refresh 후 3초(3000밀리세컨드)가 지연된 이후 콘솔창에 "sample!"이 띄워진 것을 확인할 수 있습니다.

그러면 위의 타이머 함수를 설정할 수 있으므로, 당연히 중지, 삭제도 가능합니다. 

 

 

clearTimeout

setTimeout을 사용하면 숫자 타입의 값을 반환합니다. 실행을 중지할 때는 clearTimeout()을 설정해야 하는데, 아래 예제처럼 setTimeout() 함수를 sample에 담은 후 이를 clearTimeout()으로 해제시키기 때문에, sample 함수가 실행이 되지 않는 것을 알 수 있습니다. 

 

let timeId;

function sample() {
	console.log("sample!");
    }
    
    timeId = setTimeout(sample, 3000);
    
    clearTimeout(timeId);

 

 

setInterval

이제 setTimeout 대신 setInterval를 사용해보자. 1초에 한번씩 sample이 콘솔에 찍히는 것을 볼 수 있다.

clearTimeout과 마찬가지로 clearInterval로 해제를 시킬 수 있다.

 

let timeId;

function sample() {
	console.log("sample!");
    }
    
    timeId = setInterval(sample, 1000);

 

두 가지 메소드는 비슷하지만 중요한 차이점을 가지고 있습니다.

 

setInterval: 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.

setTimeout: 일정한 시간 후에 작업을 한번 실행합니다.

 

 

requestAnimationFrame

마지막으로 최근에 많이 쓰는 메소드이다.

setInterval() 메소드는 같은 캔버스에서 반복적으로 렌더링을 하거나 어떤 값을 갱신할 때 쓰이는 데, Frame Loss나 메모리 누수로 인한 부하 등 단점들이 존재하는데, 이를 개선한 것이 requestAnimationFrame이다. 

 

requestAnimationFrame은 반복시킬 함수안에서 작성을 해준다.

 

let timeId;
const btn = document.querySelector('.btn');

function sample() {
	console.log("sample!");
    
    timeId = requestAnimationFrame(sample);
}

sample();

btn.addEventListener('click', function() {
	cancelAnimationFrame(timeId);
});

 

위의 코드는 sample 함수안에서 requestAnimationFrame() 메소드를 호출을 하기 때문에 60분의 1초 간격으로 sample 함수를 실행시켜 반복을 일으키는 것을 알 수 있다.

cancelAnimationFrame은 clearTimeout/clearInterval 메소드와 같이 앞서 소환된 requestAnimationFrame을 해제시킨다.

 

 

---

 

이렇게 인터랙티브 웹 개발 강의의 기본 이벤트와 개념들을 살펴보았고, 앞으로는 종합예제인 전진! 3D 스크롤의 종합예제를 공부하면서 응용을 해볼 수 있다.