자바스크립트에서 setInterval 함수 사용 기초

이번 강의에서는 자바스크립트에서 타이머를 사용하는 방법을 배우겠습니다. 타이머를 이해하면 페이지에서 정해진 시간 간격으로 어떤 작업을 자동으로 수행할 수 있게 됩니다. 예를 들어, 그림 슬라이더를 만들어 1초마다 그림이 바뀌게 할 수 있습니다.

자바스크립트에서 타이머 작업을 위해 setInterval 함수를 사용하며, 이 함수는 정해진 시간 간격으로 주어진 코드를 실행시킵니다.

이 함수의 동작 방식은 다음과 같습니다: 첫 번째 매개변수로 함수의 소스 코드를 받고, 두 번째 매개변수로 그 함수가 자동으로 호출될 간격을 받습니다. 두 번째 매개변수는 밀리초 단위로 지정됩니다 (1000밀리초 = 1초).

예제를 통해 함수의 동작을 알아봅시다. 예를 들어, 매초 콘솔에 무언가를 출력하는 코드를 작성해 보겠습니다.

먼저 콘솔에 무언가를 출력하는 함수를 만들어 보겠습니다:

function timer() {
	console.log('!');
}

이제 setInterval을 사용하여 우리가 만든 함수를 매초 실행되도록 해 보겠습니다:

setInterval(timer, 1000);

function timer() {
	console.log('!');
}

반드시 별도의 함수를 만들 필요는 없습니다. setInterval의 첫 번째 매개변수에 다음과 같이 익명 함수를 전달할 수도 있습니다:

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

3 초마다 콘솔에 무언가를 출력하는 타이머를 실행하세요.