JavaScript에서 반복 실행되는 스크롤 루프를 중지하려면 clearInterval() 함수를 사용하면 됩니다.
clearInterval()이란?
setInterval()로 설정한 타이머는 명시적으로 중지해 주지 않으면 무한히 반복 실행됩니다. 이때 setInterval() 호출 시 반환된 타이머 ID 값을 clearInterval()에 전달하면 해당 반복 작업을 즉시 중단할 수 있습니다.
예제 코드
다음은 일정 횟수만큼 페이지를 자동으로 아래로 스크롤한 후 루프를 멈추는 전체 코드입니다.
<!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 start = 0;
var limit = 200;
var scroll = setInterval(() => this.startScrollDown(), 20);
function startScrollDown() {
window.scrollBy(0, 1000);
console.log(start)
if (start == limit) clearInterval(scroll);
start++;
}
</script>
</html>코드 동작 원리
- start: 현재까지의 스크롤 반복 횟수를 저장하는 변수입니다.
- limit: 루프가 종료되는 기준값(200)입니다.
- scroll:
setInterval()이 반환한 타이머 ID로, 20밀리초(0.02초)마다startScrollDown()함수를 호출합니다. - startScrollDown():
window.scrollBy(0, 1000)으로 한 번에 1,000픽셀씩 아래로 스크롤하고,start값이limit에 도달하면clearInterval(scroll)을 호출하여 루프를 종료합니다.
실행 방법
위 코드를 anyName.html(또는 index.html)이라는 이름으로 저장한 뒤, VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server”(Live Server로 열기) 옵션을 선택하면 프로그램이 실행됩니다.
실행 결과
위 프로그램을 실행하면 다음과 같은 결과를 확인할 수 있습니다.
페이지가 자동으로 아래로 스크롤되며, 개발자 도구 콘솔에는 0부터 200까지의 숫자가 순차적으로 출력됩니다. start 값이 200에 도달하는 순간 clearInterval()이 호출되어 스크롤 루프가 깔끔하게 중지됩니다.