setInterval

setInterval(callback, delay, arg1, arg2, ...);

• callback: 주기적으로 실행될 함수.
• delay: 콜백 함수 간의 간격으로 밀리초(ms) 단위의 시간.
• arg1, arg2, ...: 필요한 경우 콜백 함수에 전달할 매개변수.

setInterval 함수는 일정한 간격으로 콜백 함수를 반복적으로 실행한다.

let count = 0;
console.log("Start");
const intervalId = setInterval(() => {
  count++;
  console.log(`안녕하세요 ${count}`);
  if (count === 3) {
    clearInterval(intervalId); // 3번 반복 후 중지
    console.log("Interval stopped");
  }
}, 1000);

// Start
// 안녕하세요 1
// 안녕하세요 2
// 안녕하세요 3
// Interval stopped

setTimeout

setTimeout(callback, delay, arg1, arg2, ...);

• callback: 지연 후 실행할 함수.
• delay: 실행을 지연할 밀리초(ms) 단위의 시간.
• arg1, arg2, ...: 필요한 경우 콜백 함수에 전달할 매개변수.

setTimeout 함수는 일정한 시간이 지난 후에 한 번만 콜백 함수를 실행한다.

console.log("Start");
setTimeout(() => {
  console.log("안녕하세요");
}, 1000);
console.log("End");

// Start
// End
// 안녕하세요

• setInterval 및 setTimeout 함수는 비동기적으로 실행되기 때문에 다른 코드의 실행을 차단하지 않는다.
• clearInterval 및 clearTimeout을 사용하여 각각 setInterval 및 setTimeout을 중지할 수 있다.

---

clearTimeout와 clearInterval 사용 이유

1. 리소스 관리

불필요한 타이머가 계속 실행되면 브라우저나 애플리케이션에서 메모리와 CPU 리소스를 소모할 수 있다.
clearTimeout과 clearInterval을 사용하여 더 이상 필요하지 않은 타이머를 취소함으로써 리소스를 효과적으로 관리할 수 있다.

2. 정확한 타이밍 제어

setTimeout 및 setInterval은 비동기적으로 실행되며, 실행 예정인 코드를 취소하지 않고 계속 진행하면 예상치 못한 동작이 발생할 수 있다.
특정 조건에서 타이머를 중지하고 나중에 필요한 경우 다시 설정하는 것은 정확한 타이밍을 제어하는 데 도움이 된다.

let timeoutId = setTimeout(() => {
  console.log("안녕하세요");
}, 1000);

// 어떤 조건을 체크하여 타이머 중지
if (someCondition) {
  clearTimeout(timeoutId); // 조건 충족 시 타이머 중지
}

참고자료 참고자료