[JS/jQuery] setInterval 실행과 중지

개요

이 문서는 JavaScript와 jQuery를 사용하여 웹 페이지에서 반복 실행(setInterval)을 원할 때 실행과 중지하는 방법에 대해 설명합니다. 반복적으로 실행되는 기능은 웹 개발에서 자주 사용되며, 이를 제어하는 방법은 웹 애플리케이션의 성능과 사용자 경험에 영향을 미칩니다.

1. setInterval 함수로 반복 실행 구현

setInterval 함수의 기본 사용법

setInterval 함수는 주기적으로 지정된 함수를 실행하는 타이머를 생성합니다. 함수 실행 간격은 밀리초(ms) 단위로 지정합니다. 예를 들어, 아래의 코드는 1초마다 “Hello, world!”를 출력하는 기능을 구현합니다.

setInterval(function() {
  console.log("Hello, world!");
}, 1000);

주기적인 실행과 중지 방법

반복 실행은 원하는 시점에 시작하고 중지해야 합니다. 시작은 setInterval 함수로 간단하게 처리할 수 있지만, 중지는 조금 더 신중하게 처리해야 합니다. setInterval 함수는 실행을 멈추지 않고 계속해서 함수를 반복 호출하기 때문에, 명시적으로 중지하는 방법이 필요합니다.

2. clearInterval 함수로 실행 중지

clearInterval 함수는 setInterval 함수로 생성한 타이머를 중지합니다. 이를 활용하여 원하는 시점에 반복 실행을 멈출 수 있습니다. 아래의 예제는 3초마다 숫자를 출력하다가, 10초가 되면 실행을 중지하는 기능을 구현한 것입니다.

let count = 0;

const timer = setInterval(function() {
  console.log(count);
  count++;

  if (count >= 10) {
    clearInterval(timer); // 실행 중지
  }
}, 3000);

3. jQuery를 활용한 반복 실행

보통 jQuery는 JavaScript보다 간결하고 편리한 문법을 제공하는데 반해 setInterval은 큰 장점이 없는 이유로 jQuery 형태로 취하는 경우가 많지 않습니다. jQuery 객체로 setInterval 함수를 사용하면 아래와 같이 구현할 수 있습니다.

let count = 0;

const timer = $.setInterval(function() {
  console.log(count);
  count++;

  if (count >= 10) {
    $.clearInterval(timer); // 실행 중지
  }
}, 3000);

4. 반복 실행 활용 사례

반복 실행은 다양한 웹 개발 사례에서 활용됩니다. 주요 사례들을 살펴보겠습니다.

슬라이드 쇼 만들기:
이미지나 콘텐츠를 일정 간격으로 변경하여 사용자에게 다양한 정보를 제공하는 슬라이드 쇼는 웹 사이트에서 흔히 사용되는 기능 중 하나입니다.
반복 실행을 활용하여 슬라이드 간의 전환을 자동으로 처리하여 사용자들에게 다양한 콘텐츠를 보여줄 수 있습니다.
실시간 데이터 갱신:
웹 페이지에서 실시간으로 변경되는 데이터를 반영해야 할 경우, 반복 실행을 사용하여 일정한 간격으로 서버와 통신하여 데이터를 갱신하는 기능을 구현할 수 있습니다. 이를 통해 사용자는 최신 정보를 얻을 수 있습니다.
애니메이션 효과 적용:
웹 페이지에서 동적인 애니메이션 효과를 부여하려면 반복 실행을 사용합니다. 예를 들어, 요소를 서서히 나타내거나 사라지게 하는 페이드 인/아웃 효과, 이동하는 애니메이션 등을 반복 실행을 통해 구현할 수 있습니다.
무한 스크롤 기능:
웹 페이지에서 스크롤을 내리면 새로운 콘텐츠를 불러오는 무한 스크롤 기능은 반복 실행을 활용하여 구현할 수 있습니다. 사용자가 스크롤을 내리면 일정 지점에 도달하면 새로운 데이터를 불러오도록 반복 실행을 설정합니다.
자동 완성 기능:
검색창이나 입력 양식에서 자동 완성 기능을 제공할 때에도 반복 실행을 사용합니다. 사용자가 입력한 내용에 따라 서버로부터 자동 완성된 목록을 반복적으로 요청하여 보여줍니다.
숫자 카운터:
웹 페이지에서 특정 숫자를 카운팅하는 기능을 자동으로 처리하기 위해 반복 실행을 사용합니다. 예를 들어, 투표 결과를 실시간으로 보여줄 때 투표 수를 숫자 카운터로 표시하는 것이 있습니다.
실시간 알림:
채팅 애플리케이션이나 알림 기능에서 실시간으로 새로운 메시지를 표시하는 기능을 구현할 때 반복 실행을 활용합니다. 정해진 간격으로 서버와 통신하여 새로운 메시지를 확인하는 것이 가능해집니다.

5. 실전 예제

다음은 코드펜에 올려놓은 메인페이지에서 흔히 쓸수 있는 홈페이지용 슬라이드 소스입니다.

See the Pen Full screen infinite slide(jQuery) by LeeJoono (@zmetron) on CodePen.

위 화면의 ‘Result’ 클릭하여 결과 화면을 보실 수 있습니다.
올려진 소스는 jQuery 기반으로 만들었지만 만약 순수 스크립트로 구현을 해야 한다면 스크립트 부분만 아래 소스를 활용하면 될 것 같습니다.

<script>
    var w = window.innerWidth; // 전역변수
    var page = 0;
    // li크기 화면에 맞게 교정
    function chk_win() {
        var sloganLiElements = document.querySelectorAll("#slogan li");
        sloganLiElements.forEach(function(liElement) {
            liElement.style.width = w + "px";
        });
    }
    chk_win();
    // 윈도우크기 바뀔때 크기 업데이트
    window.addEventListener("resize", function() {
        w = window.innerWidth;
        chk_win();
    });

    // ul이 li의 폭만큼 왼쪽으로 이동
    var sloganUlElement = document.querySelector("#slogan ul");
    var firstLiElement = document.querySelector("#slogan li");
    var copy = firstLiElement.cloneNode(true);
    sloganUlElement.appendChild(copy);

    function slide() {
        setTimeout(function(){
            page++;
            // $("#slogan ul").css("margin-left",-w*page);
            var page_on = page;
            if(page >= document.querySelectorAll("#slogan li").length-1) page_on = 0;
            document.querySelectorAll(".page span").forEach(function(spanElement, index) {
                spanElement.classList.remove("on");
                if (index === page_on) {
                    spanElement.classList.add("on");
                }
            });
            sloganUlElement.style.marginLeft = -w*page + "px";
            if (page >= document.querySelectorAll("#slogan li").length - 1) {
                page = 0;
                sloganUlElement.style.marginLeft = -w*page + "px";
            }
            console.log(page + "번 실행됨");
            slide();
        }, 1000);
    }
    slide();
</script>

요구사항만 본다면 위의 소스로 충분한 역할을 수행하고 있지만 setInterval을 사용할 때는 다음과 같은 주의사항이 있습니다.

6. 최적화를 고려한 setInterval 사용시 주의사항

clearInterval 사용:
setInterval 함수를 중지할 때는 반드시 clearInterval 함수를 사용하여 타이머를 제거해야 합니다.
타이머를 제거하지 않으면 계속해서 함수가 반복 호출되어 리소스 낭비가 발생할 수 있습니다.
타이머 변수 관리:
setInterval 함수를 호출할 때 반환되는 타이머 ID를 변수에 저장해두고, 필요한 때에 clearInterval을 통해 해당 타이머를 중지하는 것이 좋습니다. 타이머 변수를 관리함으로써 실행 중인 타이머를 명확하게 식별하고 중지할 수 있습니다.
페이지 이탈 시 중지:
페이지가 다른 탭으로 이동하거나 사용자가 다른 창으로 전환할 때는 setInterval 함수가 계속 실행되지 않도록 중지해야 합니다. 이를 위해 window.onblur 이벤트를 활용하여 페이지가 비활성화될 때 setInterval 함수를 중지하고, window.onfocus 이벤트를 사용하여 페이지가 활성화될 때 다시 실행할 수 있도록 합니다.
적절한 실행 간격 설정:
setInterval 함수의 실행 간격은 필요에 맞게 적절히 설정해야 합니다.
너무 짧은 간격으로 실행하면 성능 문제가 발생하고, 너무 긴 간격으로 실행하면 실시간 반응성이 떨어질 수 있습니다.
최적의 실행 간격은 기능의 목적과 페이지의 특성을 고려하여 설정해야 합니다.
타이머 재활용:
반복 실행이 필요한 경우에는 타이머를 반복적으로 생성하는 것보다 타이머를 재활용하는 것이 성능에 더 이점이 있습니다. setInterval 함수를 한 번만 실행하고, 실행되는 함수 내에서 조건에 따라 원하는 동작을 수행하도록 설계하는 방법을 고려해야 합니다.

7. 결론

예제로 사용된 풀스크린 슬라이드 소스에서는 위에서 언급한 주의사항중 핵심은 페이지 이탈시 중지 일 것 같습니다.
전역 변수로 setInterval을 담아 놓고 페이지 이탈과 활성화시 콘트롤해야 합니다.

See the Pen Full screen infinite slide(jQuery+optimize) by LeeJoono (@zmetron) on CodePen.

위의 코드펜 소스는 jQuery 버전으로 되어 있으니 javascript 버전이 필요한 사람은 아래 소스를 활용하시면 될 것 같습니다.

<script>
    var w = window.innerWidth; // 전역변수
    var page = 0;
    var intervalId; // 타이머 ID를 저장할 변수

    // li크기 화면에 맞게 교정
    function chk_win() {
        var sloganLiElements = document.querySelectorAll("#slogan li");
        sloganLiElements.forEach(function(liElement) {
            liElement.style.width = w + "px";
        });
    }

    function startSlide() {
        page++;
        var page_on = page;
        if(page >= document.querySelectorAll("#slogan li").length-1) page_on = 0;
        document.querySelectorAll(".page span").forEach(function(spanElement, index) {
            spanElement.classList.remove("on");
            if (index === page_on) {
                spanElement.classList.add("on");
            }
        });
        document.querySelector("#slogan ul").style.marginLeft = -w*page + "px";
    }

    function initSlide() {
        chk_win();
        var sloganUlElement = document.querySelector("#slogan ul");
        var firstLiElement = document.querySelector("#slogan li");
        var copy = firstLiElement.cloneNode(true);
        sloganUlElement.appendChild(copy);
        intervalId = setInterval(startSlide, 1000);
    }

    // 초기화 함수 실행
    initSlide();

    // 윈도우 크기 변경 이벤트 처리
    window.addEventListener("resize", function() {
        w = window.innerWidth;
        chk_win();
        document.querySelector("#slogan ul").style.marginLeft = -w*page + "px";
    });

    // 페이지 이탈 시 타이머 중지
    window.addEventListener("blur", function() {
        clearInterval(intervalId);
    });

    // 페이지 활성화 시 타이머 재시작
    window.addEventListener("focus", function() {
        intervalId = setInterval(startSlide, 3000);
    });
</script>

만약 창의 활성화 여부에 의한 제어가 아닌 화면에서 보여지는 것으로 기준으로 제어하고 싶은 경우가 있을 수 있습니다.
이 경우에는 Intersection Observer를 사용하면 가능합니다.

// Intersection Observer 사용
var sloganSection = document.getElementById("slogan");
var observer = new IntersectionObserver(function(entries) {
    if (entries[0].isIntersecting) {
       intervalId = setInterval(startSlide, 1000);
    } else {
        clearInterval(intervalId);
    }
});

observer.observe(sloganSection);

setInterval과 clearInterval 함수를 적절히 활용하여 원하는 시점에 반복 실행을 시작하고 중지할 수 있습니다.
웹 개발자는 반복 실행을 최적화하여 웹 페이지의 성능을 개선하는 데 주의해야 겠습니다.

FAQ

반복 실행을 중지하면 리소스 낭비를 줄일 수 있나요?
반복 실행을 중지하면 리소스 낭비를 줄일 수 있습니다. setInterval 함수를 사용하여 반복 작업이 필요하지 않을 때는 clearInterval 함수를 사용하여 중지해야 합니다.
JavaScript 없이 반복 실행을 구현할 수 있을까요?
JavaScript 없이 반복 실행을 구현하는 것은 어렵습니다. 반복 작업은 주로 프로그래밍 언어나 스크립트 언어를 사용하여 처리됩니다.
반복 실행을 사용할 때 주의할 점은 무엇인가요?
반복 실행을 사용할 때 주의해야 할 점은 무한 루프를 피하고, 리소스를 관리하며, 성능 영향을 고려하고, 타이머 간격을 적절하게 설정하며, 코드를 최적화하는 것입니다.

개요