setInterval() 메서드란 무엇인가?
setInterval()은 자바스크립트가 제공하는 다양한 타이밍 이벤트(timing events) 중 하나입니다. window 객체는 특정 시간 간격마다 코드를 실행할 수 있도록 허용하며, 그중 setInterval()은 지정한 시간마다 함수를 반복적으로 호출하는 역할을 합니다.
이 메서드는 두 가지 필수 인자를 받습니다. 첫 번째는 반복 실행할 함수이고, 두 번째는 해당 함수를 반복할 시간 간격(밀리초 단위)입니다.
문법(Syntax)
window.setInterval(function, milliseconds, param1, param2, ...);
이 메서드는 함수와 시간 간격 외에도 추가 매개변수를 전달할 수 있으며, 이 값들은 실행되는 함수에 그대로 넘겨집니다.
예제 1
다음 예제에서는 setInterval() 메서드를 정의하고 시간 간격을 3000밀리초, 즉 3초로 지정했습니다. 따라서 메서드 내부에 작성된 함수는 3초마다 반복 실행됩니다. 아래 출력 결과는 9초 동안 실행된 화면입니다.
<html>
<body>
<script>
setInterval(function(){
document.write("Tutorix </br>");
}, 3000);
</script>
</body>
</html>출력 결과
Tutorix Tutorix Tutorix
예제 2
다음 예제에서는 setInterval() 메서드에 2000밀리초, 즉 2초의 시간 간격을 지정했습니다. 따라서 내부에 정의된 함수는 2초마다 반복 실행되며, 그 결과는 아래 출력과 같습니다.
<html>
<body>
<script>
setInterval(function(){
document.write("Hello </br>");
}, 2000);
</script>
</body>
</html>출력 결과
Hello Hello
정리
setInterval()은 일정한 주기로 작업을 반복해야 할 때 유용하게 사용됩니다. 다만 반복 실행이 계속되면 브라우저에 부담이 될 수 있으므로, 더 이상 필요하지 않을 때는 clearInterval() 메서드를 사용해 반복을 중지하는 것이 좋습니다.