JavaScript setInterval() 반복 실행을 해제(중지)하는 방법

setInterval() 메서드란?

JavaScript의 setInterval() 메서드는 지정한 시간 간격마다 특정 함수나 표현식을 반복적으로 실행할 때 사용합니다. 이 함수는 설정된 밀리초(ms) 단위의 시간이 경과할 때마다 호출되며, 별도로 중지하지 않는 한 무한히 반복됩니다.

setInterval() 기본 예제

아래 예제는 2000밀리초(2초)마다 alert('Hello')를 실행합니다. 단 한 번만 실행되는 것이 아니라, 중지하기 전까지 계속 반복됩니다.

setInterval(function() { alert('Hello'); }, 2000);

setInterval() 해제하기 — clearInterval() 사용법

setInterval()의 반복 실행을 중지하려면 window.clearInterval() 메서드를 사용하고, 매개변수로 setInterval()이 반환한 타이머 ID 값을 전달하면 됩니다.

// setInterval() 실행 후 반환되는 ID를 변수에 저장
const intervalID = setInterval(function() { alert('Hello'); }, 2000);

// 저장한 ID를 전달하여 setInterval() 해제
window.clearInterval(intervalID);

즉, 먼저 setInterval() 호출 시 반환되는 ID 값을 변수에 저장해 둔 뒤, 더 이상 반복 실행이 필요 없는 시점에 clearInterval()에 해당 ID를 넘겨주면 타이머가 해제되어 함수 호출이 중단됩니다. 버튼 클릭이나 특정 조건 충족 시 타이머를 멈춰야 하는 상황에서 유용하게 활용할 수 있습니다.