setInterval()은 지정한 시간 간격마다 함수를 반복적으로 실행하는 JavaScript 타이머 함수입니다. 하지만 실무에서는 무한히 반복되는 것이 아니라 일정 시간이 지난 후 또는 정해진 작업 횟수를 채운 후 반복을 멈춰야 하는 경우가 많습니다. 이럴 때는 조건문과 clearInterval()을 함께 사용하면 됩니다.
핵심 원리: clearInterval()과 조건문
setInterval()이 반환하는 고유 ID를 변수에 저장해 두면, 원하는 조건이 충족되는 시점에 clearInterval()에 그 ID를 전달하여 타이머를 중지할 수 있습니다. 아래 예제는 시작 시점의 시간을 기록해 둔 뒤, 30초(반 분)가 경과하면 자동으로 반복 실행을 멈춥니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<script>
var now = new Date().getTime();
var interval = setInterval(function () {
if (new Date().getTime() - now > 30000) {
clearInterval(interval);
return;
}
console.log("working");
}, 2000);
</script>
</html>
코드 동작 방식
new Date().getTime()으로 프로그램 시작 시점의 타임스탬프를now변수에 저장합니다.setInterval()은 2000밀리초(2초)마다 콜백 함수를 실행하며, 실행될 때마다 현재 시간과 시작 시간의 차이를 계산합니다.- 경과 시간이 30000밀리초(30초)를 초과하면
clearInterval(interval)로 타이머를 중지하고return으로 함수 실행을 종료합니다. - 조건이 충족되지 않는 동안에는 콘솔에 "working"이라는 메시지를 출력합니다.
실행 방법
위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 뒤, 해당 파일에서 마우스 오른쪽 버튼을 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.
실행 결과
프로그램을 실행하면 2초마다 콘솔에 "working"이 출력되다가, 30초가 지나면 다음과 같이 반복이 자동으로 중지됩니다.
응용: 정해진 횟수만큼만 실행하기
시간 대신 실행 횟수를 기준으로 중지하고 싶다면 카운터 변수를 활용하면 됩니다. 아래 코드는 2초 간격으로 10번 실행된 후 자동으로 멈춥니다.
let count = 0;
const interval = setInterval(() => {
count++;
console.log("working", count);
if (count >= 10) {
clearInterval(interval);
}
}, 2000);
이처럼 시간 기반 조건이든 횟수 기반 조건이든, clearInterval()을 적절한 시점에 호출하는 것이 setInterval() 반복을 안전하게 종료하는 핵심입니다.