jQuery setInterval로 특정 시간동안 반복 호출하기

jQuery setInterval로 특정 시간동안 반복 호출하기

웹 개발을 하다 보면 일정 시간 간격으로 특정 함수를 반복 실행해야 하는 경우가 많습니다. 예를 들어 실시간 데이터 갱신, 슬라이드 쇼, 타이머 기능 등이 그러한 예입니다. 오늘은 jQuery와 JavaScript의 setInterval 함수를 활용하여 특정 시간 동안만 함수를 반복 호출하는 방법을 알아보겠습니다.

반복 실행 타이머

setInterval 기본 개념

setInterval은 JavaScript의 내장 함수로, 지정된 시간 간격마다 특정 함수를 반복적으로 실행합니다. 이 함수는 타이머 ID를 반환하는데, 이를 이용해 clearInterval로 반복 실행을 중지할 수 있습니다.

💡 핵심 포인트

setInterval은 무한 반복되므로, 특정 시간 후에 멈추려면 clearInterval을 반드시 호출해야 합니다.

기본 사용법

가장 기본적인 setInterval 사용 예제입니다. 1초마다 콘솔에 메시지를 출력합니다.

// 1초마다 실행
var intervalId = setInterval(function() {
    console.log('1초가 지났습니다.');
}, 1000);

// 5초 후 중지
setTimeout(function() {
    clearInterval(intervalId);
    console.log('타이머가 종료되었습니다.');
}, 5000);

jQuery와 함께 사용하기

jQuery를 활용하면 DOM 요소를 쉽게 조작할 수 있습니다. 아래 예제는 3초 동안 1초마다 카운터를 증가시키는 코드입니다.

$(document).ready(function() {
    var count = 0;
    var maxDuration = 3000; // 3초 동안 실행
    var intervalTime = 1000; // 1초마다 실행
    var startTime = Date.now();
    
    var intervalId = setInterval(function() {
        count++;
        $('#counter').text(count);
        
        // 경과 시간 체크
        var elapsed = Date.now() - startTime;
        if (elapsed >= maxDuration) {
            clearInterval(intervalId);
            $('#status').text('완료!');
        }
    }, intervalTime);
});

1초 2초 3초 시간 경과에 따른 반복 실행

실전 예제: 반복 ajax 호출

 

$(document).ready(function() {
    var remainingTime = 10; // 10초
    
    $('#startBtn').click(function() {
        $(this).prop('disabled', true);
        
        var intervalId = setInterval(function() {
            remainingTime--;
            $('#timer').text(remainingTime + '초 남음');
            
            // 진행률 표시
            var progress = ((10 - remainingTime) / 10) * 100;
            $('#progressBar').css('width', progress + '%');
            
            if (remainingTime <= 0) {
                clearInterval(intervalId);
                $('#timer').text('시간 종료!');
                $('#startBtn').prop('disabled', false);
                remainingTime = 10;
            }
        }, 1000);
    });
});

반복 횟수로 제어하기

시간이 아닌 반복 횟수로 제어하는 방법도 있습니다. 특정 횟수만큼 실행 후 자동으로 멈추는 예제입니다.

$(document).ready(function() {
    var count = 0;
    var maxCount = 5; // 5번만 실행
    
    var intervalId = setInterval(function() {
        count++;
        $('#message').append('<p>' + count + '번째 실행</p>');
        
        if (count >= maxCount) {
            clearInterval(intervalId);
            $('#message').append('<p style="color: red;">종료되었습니다.</p>');
        }
    }, 1000);
});

⚠️ 주의사항

setInterval을 사용할 때는 반드시 clearInterval로 정리해야 합니다. 그렇지 않으면 메모리 누수가 발생할 수 있습니다. 또한 페이지를 벗어날 때도 타이머를 정리하는 것이 좋습니다.

페이지 이탈 시 정리하기

사용자가 페이지를 떠날 때 타이머를 자동으로 정리하는 방법입니다.

var intervalId;

$(document).ready(function() {
    intervalId = setInterval(function() {
        // 반복 실행할 코드
    }, 1000);
});

// 페이지 이탈 시 정리
$(window).on('beforeunload', function() {
    if (intervalId) {
        clearInterval(intervalId);
    }
});

반복 실행 흐름

마무리

jQuery와 setInterval을 활용하면 다양한 타이머 기능을 쉽게 구현할 수 있습니다. 실시간 데이터 갱신, 애니메이션 효과, 게임 로직 등 다양한 곳에 활용할 수 있으니 꼭 익혀두시기 바랍니다. 가장 중요한 것은 사용 후 반드시 clearInterval로 정리하는 것을 잊지 마세요!

📌 핵심 요약

• setInterval로 일정 간격마다 함수 반복 실행
• clearInterval로 반복 실행 중지
• 시간 또는 횟수로 실행 제어 가능
• 메모리 누수 방지를 위해 반드시 정리 필요