JavaScript

setTimeout, setInterval 타이머 생성 함수 기초편

2023년 11월 03일 19:29

이번 포스트에서는 자바스크립트의 타이머 함수인 setTimeout이랑 setInterval에 대해 알아보겠습니다.

0. 타이머 함수란?

자바스크립트 빌트인 함수가 아닌, 브라우저/Node.js환경에서 제공하는 전역 객체의 메서드로 제공하는 호스트 객체입니다.

타이머 생성 함수: setTimeout, setInterval
타이머 제거 함수: clearTimeout, clearInterval

1. setTimeout

setTimeout은 일정 시간이 지난 후에 함수를 실행해주는 타이머 생성 함수입니다.

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)

1-1 매개변수

func|code: 실행하고자 하는 코드로, 대부분 함수가 들어갑니다.
delay: 실행 전 대기 시간으로, 단위는 밀리초, 기본값은 0입니다. 대부분 여기까지 많이 씁니다.
arg1, arg2…: 함수에 전달할 인수들로, IE9 이하에선 지원하지 않습니다.

EX)

function sayHi() {
  alert("안녕하세요.");
}
 
setTimeout(sayHi, 1000);

setTimeout함수의 기본 구조입니다. 위와 같이 입력하고 컴파일 할 경우 sayHi함수가 1000m/s(1초)뒤에 안녕하세요.라는 문구가 뜰 것입니다.

이 외에도 함수에 인자를 넘겨 줄 수도 있습니다.

function sayHi(who, phrase) {
  alert(who + " 님, " + phrase);
}
 
setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요.

위와 같이 작성하고 실행해주면 1초 뒤에 who자리에 "홍길동", phrase에 "안녕하세요."가 담긴 sayHi함수가 실행되게 됩니다.

2. setIntertval

let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)

기본 구조는 setTimeout과 동일합니다. 다만 차이점이라고 하면 setIntertval는 함수를 주기적으로 실행합니다.

함수 호출을 중단하려면 clearInterval(timerId)을 사용하면 됩니다.

EX)

// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert("째깍"), 2000);
 
// 5초 후에 정지
setTimeout(() => {
  clearInterval(timerId);
  alert("정지");
}, 5000);

위 코드를 실행해보면 2초에 한번씩 alert("째깍")이 실행되며 이러한 함수가 5초뒤 clearInterval(timerId);라는 생성자 제거 함수로 인해 멈추게 됩니다.

마무리

여기까지 setTimeout, setInterval 타이머 생성 함수 기초에 대해 알아보았습니다. 다음에는 타이머 제거 함수인 clearTimeout, clearInterval에 대해 알아보겠습니다. 그리고 한가지 더, setTimeout, setInterval는 완벽한 시간을 보장하지 않는다는 사실을 알고 있습니까? 제가 이 부분을 나눠서 설명하는 이유가 이것 때문입니다. 그 부분은 다음에 심화편에서 알아보겠습니다.