[JavaScript] setInterval, setTimeout 사용하여 반복 실행을 해보자

[JavaScript] setInterval, setTimeout 사용하여 반복 실행

자바스크립트에서 반복 작업 시 자주 만나는 setInterval()과 setTimeout()에 대해 정리해보려고 합니다.

 

💡 먼저, setTimeout()란?

특정 코드나 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 타이밍 이벤트 함수입니다.

 

setTimeout() 함수의 내부에 위치한 코드는 콜백함수로 지연시간 뒤에 실행될 코드를 설정합니다.

지연시간은 밀리세컨드 단위로 설정해야 하며 지연시간 1000은 1초를 의미합니다.

만약 5초 뒤에 Time Out Test!이라는 문구를 콘솔에 출력하고 싶다면, 아래와 같이 작성합니다. 

 

setTimeout(function() {

  console.log('Time Out Test!'); //호출될 코드
  
}, 5000); //delay 시간

 

---

💡 setTimeout() 사용 예제

• 접속 후 일정 시간이 지나 로그아웃 처리를 하는 경우 
• 일부 섹션이 몇 초 뒤에 사라질 경우
• 방문자가 사이트에 접속한 지 20-30초가 지난 뒤 광고 팝업을 띄울 경우

이렇게 일회성 타이밍 이벤트가 아닌 일정 시간별로 반복 실행을 하고 싶다면, 아래와 같은 방법이 있습니다. 

 

1. 정해진 시간 뒤 한 번만 실행되는 setTimeout()을 반복 실행한 뒤, 종료 조건을 별도로 주는 방법
2. 종료 조건 전까지 계속 반복되는 setInterval()을 사용하여 반복을 하는 방법

 

---

💡만약 반복 함수를 중지하고 싶다면, 

반복되는 타이머 함수를 중지하기 위해서는 clear를 사용합니다.

setTimeout을 중지하기 위해서는 👉 clearTimeout()
setInterval을 중지하기 위해서는 👉 clearInterval()

예를 들어, 이렇게 반복되는 타이머 함수가 있다면,

var myVar = setInterval(function() {
  // 타이머로 반복할 코드
}, 3000);

 

괄호 안에 종료하고 싶은 타이머의 변수를 넣어 clear 할 수 있습니다.

clearInterval(myVar);

 

 

언뜻 보기에는 setTimeout()을 반복해서 실행하는 것과 setInterval()을 사용하는 것이 거의 유사해 보이지만,

실제 실행에 있어서는 조금 차이가 있습니다. 

 

📌 setInterval 함수는 앞서 진행 중인 코드의 완료 유무와 관계없이 정해둔 시간 간격에 무조건 지정된 코드를 호출하고자 합니다. 하지만 지정된 시간 간격에 도달했음에도 불구하고 지정된 코드를 실행할 수 없는 상태라면 setInterval은 이벤트를 큐에 저장합니다. 즉, setInterval을 사용하면, 내가 지정한 시간에 무조건 해당 코드가 실행되지만, 이벤트가 중첩되거나 처리할 수 없는 상황인 경우 코드가 무시될 수 있습니다.

 

📌 setTimeout을 실행하면 처음 지정된 간격만큼 기다린 후 지정된 코드를 실행한 뒤, 지정된 코드가 다 끝난 시점에 다시 setTimeout 함수를 호출합니다. 따라서 먼저 실행 중인 코드가 지연되더라도 모든 처리가 끝난 다음에 setTimeout을 호출하기 때문에 이벤트가 중첩되지 않고, 모두 실행됩니다.

 

💡마무리

이렇게 일회성 타이밍 이벤트가 아닌 일정 시간별로 반복 실행을 하고 싶다면,

setTimeout() 혹은 setInterval()을 사용하여 반복할 수 있으며, 반복 실행을 종료하고 싶다면 clear함수를 사용합니다. 

 

그리고 시간 지연이 있더라도 해당 코드의 동작을 모두 실행시키고 싶을 경우에는 setTimeout 함수를, 중첩될 경우 무시되더라도 반드시 정해진 시간에 해당 코드를 실행시키고 싶다면 setInterval 함수를 사용한다는 것을 알고 용도에 맞게 적절한 것을 사용하시면 좋을 것 같습니다.