[JavaScript] setTimeout, setInterval 정의와 사용방법

▪️ setTimeout이란?

• 나중에 실행하기 기능이라고 생각하면 된다.
• 1회성 실행 : 지정된 시간이 지난 후 코드를 단 한번만 실행합니다. 
• 실행 패턴: 딜레이 → 실행 → 종료

// setTimeout을 변수에 저장
const timer = setTimeout(() => {
    console.log("setTimeout 실행");
}, 3000);

// 타이머 취소
clearTimeout(timer);

 

주요 특징 :

1. 첫번째 인자: 실행할 함수 (뭘 할지)
2. 두번째 인자: 지연 시간 (milliseconds) (언제 할지)
3. 한 번만 실행됨

⚠️  주의할 점 :

• 시간은 밀리초(1000 = 1초) 단위입니다
• 0을 넣어도 바로 실행되지 않고 최소한의 지연이 발생합니다
• clearTimeout()으로 예약된 작업을 취소할 수 있습니다
• clearTimeout()은 불필요한 동작을 방지하고 사용자 경험을 개선하는데 매우 유용합니다. 특히 연속된 이벤트를 처리할 때나 타이머를 리셋해야 할 때 자주 사용됩니다.

 

▪️ setInterval이란?

• 반복해서 실행하기 기능이라고 생각하면 된다. 
• 반복 실행: 지정된 시간 간격마다 코드를 계속해서 실행합니다.
• 실행 패턴: 딜레이 → 실행 → 딜레이 → 실행 → ... (반복)

 

// clear 예제
const timer = setInterval(() => {
    console.log('실행');
}, 1000);

// 필요없을 때 취소
clearInterval(timer);

 

⚠️  주의할 점 :

 

 

• 시간은 밀리초(1000 = 1초) 단위입니다
• 메모리 누수를 피하기 위해 필요없을 때는 반드시 clearInterval로 중지해야 합니다
• 브라우저 탭이 비활성화되면 실행 간격이 늘어날 수 있습니다

 

이 두개를 작성하게된 계기는 
setInterval를 사용하지않고 setTimeout을 재귀함수로 호출해서 반복사용하도록 코드를 작성한적이있었다.
왜 setInterval을 사용하지 않았던 것일까?

 

▪️ setTimeout 재귀 방식

function fetchData() {
    setTimeout(() => {
        $.ajax({
            url: 'api/data',
            success: function(result) {
                console.log('데이터 수신:', result);
                fetchData(); // API 호출이 성공한 후에만 다음 호출 예약
            },
            error: function(err) {
                console.error('에러 발생:', err);
                fetchData(); // 에러 발생 시에도 다음 호출 예약
            }
        });
    }, 3000);
}

// 시작
fetchData();

장점:

• 이전 API 호출이 완료된 후에만 다음 타이머가 설정되므로, 작업 시간이 딜레이 시간보다 길어도 문제가 없음
• 각 반복 사이에 정확한 딜레이 보장
• 동적으로 딜레이 시간을 조정하기 쉬움
• 네트워크 상태에 따라 자연스럽게 간격 조절
• 서버 부하 관리가 더 용이함
• 응답 순서가 보장됨
• 에러 처리와 재시도 로직도 더 세밀하게 제어할 수 있음

단점:

• 코드가 약간 더 복잡함
• 메모리에 콜백 함수가 계속 쌓일 수 있음

 

▪️ setInterval 방식

// 잠재적 문제가 있는 방식
setInterval(() => {
    $.ajax({
        url: 'api/data',
        success: function(result) {
            console.log('데이터 수신:', result);
        },
        error: function(err) {
            console.error('에러 발생:', err);
        }
    });
}, 3000);

장점 :  

• 코드가 더 간단하고 직관적
• 메모리 사용이 일정함

단점 :

• 작업 실행 시간이 인터벌 시간보다 길어지면 작업이 겹칠 수 있음
• 실제 인터벌이 설정한 시간과 달라질 수 있음
• 네트워크 지연이 발생하면 이전 요청이 완료되기 전에 새로운 요청이 시작될 수 있음
• 서버에 불필요한 부하가 걸릴 수 있음
• 응답 순서가 보장되지 않음

▪️ 결론 

• 단순한 주기적 실행이면 setInterval
• 아래 경우는 setTimeout 재귀를 사용합니다 
  • 서버 통신같은 무거운 작업을 할 때
  • 작업 시간이 가변적일 때
  • 다음 실행 간격을 동적으로 조절해야 할 때