setInterval, setTimeout이란?

 

 

JavaScript에서 setInterval, setTimeout은 무엇이고 어떠한 차이점을 가지는지 알아보자

 

 

 

[ 참고 블로그 ]

 

https://likedev.tistory.com/entry/Javascript-setInterval-setTimeout-%EC%B0%A8%EC%9D%B4

[Javascript] setInterval, setTimeout 차이

 

 

 

---

 

 

1. setInterval( )이란?

 

 

setInterval은 일정한 시간을 간격으로 계속 반복되는 함수이다

 

function hi() {
  document.writeln("Hello!");
}

// 1000 = 1초
setInterval(hi, 1000);

 

 

위 코드에서 알 수 있듯 1초에 한번씩 hi 함수를 무한으로 반복한다

 

그렇게 되면 프로그램은 중단할 수 있는 End-Point가 없기 때문에 에러가 발생하게 될것이다

 

그렇다면 이setInterval을 멈추려면 어떻게 해야하는지 알아보자

 

 

 

2. clearInterval( )이란?

 

clearInterval을 사용하면 실행중인 setInterval을 중지시킬 수 있다

 

 

// 초기 카운트 값 설정
let count = 10;

// 카운트다운 함수
function countdown() {
  // 카운트 값이 0이 될 때까지 출력하고 1씩 감소
  document.writeln(count);
  count--;

  // 카운트가 0이 되면 clearInterval을 호출하여 반복을 중지
  if (count < 0) {
    clearInterval(timer);
    document.writeln("카운트가 종료되었습니다.");
  }
}

// 1초마다 countdown 함수를 실행하는 타이머 설정
const timer = setInterval(countdown, 1000);

 

 

중요한 것은 clearinterval을 사용하려면, 어떤 interval을 종료시킬건지를 적어줘야한다

 

// 1초마다 countdown 함수를 실행하는 타이머 설정
const timer = setInterval(countdown, 1000);

// timer 
clearInterval(timer);

 

 

위 방법 사용시 setInterval 종료가 가능하다 

 

 

3. setTimeout( )이란?

 

 

setTimeout은 일정 시간 이후 한 번만 해당 함수를 실행시켜주는 함수이다

 

function sayHello() {
  document.writeln("Hello!");
}

setTimeout(sayHello, 3000); // 3초 후에 sayHello 함수 실행

 

 

 

 

 

4. setInterval과 setTimeout의 차이점

 

setInterval은 일정시간이 지나도 멈추지 않고 계속 반복되고, setTimeout은 일정 시간 이후 한 번 실행된다는 특징이있다

 

물론 setTimeout을 for문과 같은 반복문에 넣으면 setInterval과 동일한 효과를 볼 수도 있으나, 시스템의 사양이나, 해당 실행 함수에 따라 해당 방식은 오류를 발생시킬 가능성이 있다

 

반복적으로 함수를 일정한 시간을 두고 실행해야할 경우에는 setInterval을 사용하고, 딜레이 이후 한 번만 사용할 경우에는 setTimeout을 사용하는것이 좋은 방법이다