JavaScript에서 `setInterval`과 `setTimeout` 사용법과 예제

JavaScript에서 setInterval과 setTimeout은 타이머 기반 기능을 제공하여 특정 작업을 일정 시간 간격으로 실행하거나, 일정 시간이 지난 후 한 번 실행하도록 하는 데 사용됩니다. 이 글에서는 setInterval과 setTimeout의 사용법, 차이점, 예제, 그리고 실무에서의 활용법을 자세히 다룹니다.

---

1. setTimeout과 setInterval의 기본 개념

1.1 setTimeout

setTimeout은 지정된 시간이 지난 후에 특정 작업을 한 번 실행하도록 예약합니다.

문법:

let timerId = setTimeout(function, delay, [param1, param2, ...]);

• function: 실행할 함수
• delay: 밀리초 단위의 지연 시간 (1000ms = 1초)
• param1, param2: 함수에 전달할 매개변수 (선택 사항)

예제:

setTimeout(() => {
  console.log("1초 후에 실행됩니다.");
}, 1000);

---

1.2 setInterval

setInterval은 지정된 시간 간격마다 특정 작업을 반복 실행하도록 예약합니다.

문법:

let intervalId = setInterval(function, delay, [param1, param2, ...]);

예제:

setInterval(() => {
  console.log("1초 간격으로 실행됩니다.");
}, 1000);

---

1.3 clearTimeout과 clearInterval

예약된 작업을 중지하려면 clearTimeout 또는 clearInterval을 사용합니다.

예제:

let timeoutId = setTimeout(() => {
  console.log("실행되지 않습니다.");
}, 5000);

clearTimeout(timeoutId); // 예약된 작업을 취소

let intervalId = setInterval(() => {
  console.log("실행되지 않습니다.");
}, 1000);

clearInterval(intervalId); // 반복 작업 중지

---

2. setTimeout과 setInterval의 차이점

구분	setTimeout	setInterval
실행 횟수	한 번만 실행	지정된 간격마다 반복 실행
사용 목적	일정 시간 후 한 번의 작업 실행	일정 시간 간격으로 반복 작업 실행
취소 메서드	clearTimeout	clearInterval

---

3. 실무에서의 다양한 활용 예제

3.1 setTimeout을 이용한 지연 작업

예제 1: 간단한 지연 출력

console.log("출력 1");
setTimeout(() => {
  console.log("출력 2 (2초 후)");
}, 2000);
console.log("출력 3");

출력 결과:

출력 1
출력 3
출력 2 (2초 후)

예제 2: 매개변수 전달

function greet(name) {
  console.log(`Hello, ${name}!`);
}

setTimeout(greet, 1000, "Alice");

출력 결과:

Hello, Alice!

---

3.2 setInterval을 이용한 주기적 작업

예제 1: 시계 구현

setInterval(() => {
  let now = new Date();
  console.log(now.toLocaleTimeString());
}, 1000);

출력 결과:
매초 현재 시간이 출력됩니다.

11:00:01
11:00:02
11:00:03
...

예제 2: 상태 업데이트

let counter = 0;
const intervalId = setInterval(() => {
  console.log(`Count: ${counter}`);
  counter++;

  if (counter > 5) {
    clearInterval(intervalId); // 5번 실행 후 중지
  }
}, 1000);

출력 결과:

Count: 0
Count: 1
Count: 2
Count: 3
Count: 4
Count: 5

---

3.3 setTimeout으로 setInterval과 같은 동작 구현

예제:

function repeatTask() {
  console.log("1초마다 실행됩니다.");
  setTimeout(repeatTask, 1000); // 재귀 호출로 반복
}

repeatTask();

---

3.4 setInterval로 애니메이션 효과 구현

예제: 로딩 애니메이션

const spinner = ["|", "/", "-", "\\"];
let index = 0;

setInterval(() => {
  process.stdout.write(`\r${spinner[index]}`);
  index = (index + 1) % spinner.length;
}, 200);

---

3.5 clearTimeout과 clearInterval 활용

예제: 10초 후 자동 종료

let count = 0;
const intervalId = setInterval(() => {
  console.log(`Interval 실행: ${count}`);
  count++;
}, 1000);

setTimeout(() => {
  clearInterval(intervalId);
  console.log("Interval 중지");
}, 10000); // 10초 후 중지

---

4. setTimeout과 setInterval 사용 시 주의 사항

4.1 정확성 문제

setInterval은 지정된 시간이 지나도 이전 작업이 완료되지 않으면 간격이 겹칠 수 있습니다. 이를 방지하려면 setTimeout으로 반복 작업을 구현하는 것이 더 적합합니다.

예제:

function repeatTask() {
  setTimeout(() => {
    console.log("작업 실행");
    repeatTask(); // 다음 작업 예약
  }, 1000);
}

repeatTask();

---

4.2 메모리 누수 방지

setTimeout과 setInterval은 메모리를 차지하므로, 필요하지 않을 때는 clearTimeout 또는 clearInterval로 중지해야 합니다.

---

5. 실제 프로젝트에서의 응용

5.1 실시간 채팅 알림

function checkNewMessages() {
  console.log("새 메시지를 확인합니다...");
}

setInterval(checkNewMessages, 5000); // 5초마다 메시지 확인

---

5.2 비동기 작업과 타이머 조합

function fetchData() {
  setTimeout(() => {
    console.log("데이터 로드 완료");
  }, 3000);
}

console.log("데이터 로드를 시작합니다...");
fetchData();

---

5.3 동적 UI 업데이트

예제: 프로그래스 바

let progress = 0;
const progressBar = setInterval(() => {
  progress += 10;
  console.log(`진행률: ${progress}%`);

  if (progress >= 100) {
    clearInterval(progressBar);
    console.log("완료되었습니다!");
  }
}, 1000);

---

6. 결론

setTimeout과 setInterval은 JavaScript에서 지연 작업과 반복 작업을 구현할 때 매우 유용합니다. 이 글에서는 기본 사용법부터 실무에서 활용할 수 있는 다양한 예제까지 다뤘습니다. 프로젝트에서 효율적으로 활용하여 타이밍 기반의 작업을 구현해 보세요!