JavaScript에서 일정 시간 후 함수를 실행하는 방법: setTimeout()과 setInterval() 완벽 정리

JavaScript에서는 특정 시간이 지난 후에 함수를 호출하거나 실행할 수 있는 몇 가지 방법이 있습니다. 이번 글에서는 대표적인 타이밍 이벤트 메서드인 setTimeout()과 setInterval() 두 가지를 소개합니다.

두 메서드의 차이점은 다음과 같습니다.

• setTimeout(): 지정된 밀리초(1/1000초)만큼 기다린 후 함수를 한 번만 실행합니다.
• setInterval(): 지정된 시간 간격마다 함수를 계속 반복해서 실행합니다.

그럼 각각의 간단한 예제를 살펴보겠습니다.

JavaScript setTimeout() 예제

아래 코드를 코딩 플레이그라운드의 JavaScript 콘솔에 입력해 보세요. 브라우저 개발자 도구의 콘솔을 사용해도 됩니다.

setTimeout(function() {
  alert("Hello there!")
}, 3000)

여기서 3000은 밀리초(ms) 단위이므로 3초를 의미합니다. 이 코드는 페이지가 처음 로드된 후 3초가 지나면 실행되며, "Hello there!"라는 알림 메시지를 화면에 표시합니다.

JavaScript setInterval() 예제

마찬가지로 아래 코드를 코딩 플레이그라운드의 JavaScript 콘솔에 입력해 보세요.

setInterval(function() {
  alert("Hello there!")
}, 3000)

이 코드는 3초마다 알림 메시지를 반복해서 표시합니다.

추가 팁: setInterval() 멈추는 방법

setInterval()은 무한히 반복되기 때문에 필요 없어지면 중지해야 합니다. clearInterval()을 사용하면 반복을 멈출 수 있습니다.

const timerId = setInterval(function() {
  alert("Hello there!")
}, 3000)

// 반복 실행을 중지하고 싶을 때
clearInterval(timerId)

마찬가지로 setTimeout()도 clearTimeout()으로 예약된 실행을 취소할 수 있습니다. 상황에 맞게 두 메서드를 활용하면 타이머, 자동 저장, 주기적 데이터 갱신 같은 기능을 손쉽게 구현할 수 있습니다.