JavaScript setInterval() 함수란?
JavaScript의 setInterval() 메서드는 지정한 시간 간격마다 특정 표현식이나 함수를 반복적으로 실행할 때 사용합니다. 실시간 시계, 타이머, 자동 새로고침 등 주기적으로 수행해야 하는 작업을 처리할 때 매우 유용하게 활용됩니다.
기본 문법
setInterval(function, interval_in_milliseconds, param1, param2, param3...)
매개변수 설명:
- function: 일정 간격으로 반복 실행할 함수
- interval_in_milliseconds: 코드가 실행되는 시간 간격(밀리초 단위). 1000밀리초 = 1초
- param1, param2, param3...: (선택 사항) 실행할 함수에 전달되는 추가 매개변수
setInterval() 사용 예제
아래 예제는 setInterval()을 활용해 0.5초(500밀리초)마다 현재 시간을 화면에 갱신하는 실시간 시계입니다. 직접 실행해 결과를 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<p id="test"></p>
<script>
var myVar = setInterval(function(){ displayTimer() }, 500);
function displayTimer() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("test").innerHTML = "Time: "+time;
}
</script>
</body>
</html>
코드 동작 원리
setInterval()이 500밀리초마다displayTimer()함수를 반복 호출합니다.displayTimer()함수는new Date()로 현재 시각을 가져온 뒤,toLocaleTimeString()을 통해 지역 시간 형식으로 변환합니다.- 변환된 시간 문자열을 id가 "test"인 요소의
innerHTML에 대입하여 화면에 출력합니다.
반복 실행 중지하기 — clearInterval()
setInterval()로 시작된 반복 작업은 clearInterval() 메서드를 사용해 언제든 중지할 수 있습니다.
clearInterval(myVar);
위 예제에서 myVar는 setInterval()이 반환한 타이머 ID입니다. 이 ID를 clearInterval()에 전달하면 해당 반복 실행이 즉시 중단되므로, 버튼 클릭 등 특정 조건에서 타이머를 멈추고 싶을 때 함께 활용하면 좋습니다.