[javascript] 자바스크립트 타이머 (setTimeout, setInterval)

자바스크립트를 짜다보면 함수를 바로 실행하지 않고 일정시간 뒤에 실행하도록 하고싶을 때가 있습니다. 이런 기능을 구현할 수 있도록 자바스크립트에서는 setTimeout과 setInterval 함수를 지원합니다.

setTimeout

일정 시간(밀리세컨드) 이후 함수 실행

setTimeout(() => {
	// do something
	console.log('javascript');
}, 1000);

위 코드는 첫번째 인자의 함수를 1000 밀리세컨드 이후에 실행하도록 하는 코드입니다. 1000 밀리세컨드는 1초 입니다.

setTimeout

만약 주어진 시간이 지나기 전에 타이머를 취소하고 싶으면 clearTimeout을 사용합니다.

const timer = setTimeout(() => {
	// do something
	console.log('javascript');
}, 5000);

clearTimeout(timer);

위의 코드를 실행하면 'javascript'라는 문자열은 콘솔에 찍히지 않습니다. 왜냐하면 타임아웃이 끝나기 전에 clearTimeout으로 취소를 해버렸기 때문입니다.

clearTimeout

setInterval

일정 시간(밀리세컨드) 이후 일정 간격으로 인자로 받은 함수를 실행하는 코드로서 사용방법은 setTimeout과 동일합니다.

setInterval(() => {
	// do something
	console.log('javascript');
}, 1000);

위 코드는 인자로 넣은 함수를 1초 후에 1초 간격으로 계속 실행 하도록 하는 코드입니다. setTimeout과 setInterval의 차이는 최초 실행 이후 다음번에도 반복 하느냐 안하느냐의 차이입니다.

setInterval은 setTimeout과 마찬가지로 스케줄링을 취소하는 clearInterval 함수가 있습니다.

const timer = setInterval(() => {
	// do something
	console.log('javascript');
}, 1000);

clearInterval(timer);

위의 clearInterval로 1초마다 로그를 찍는 코드를 아무때나 종료할 수 있습니다.

setInterval

관련 글

자바스크립트 scroll to top 버튼 만들기