setTimeout과 setInterval의 기능 및 사용법

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 합니다.

호출 스케줄링을 구현하는 방법은 두 가지가 있습니다.

• setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
• setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법

---

1. setInterval() 메소드

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. (출처 : MDN web docs)

setInterval() 메소드는 Window 인터페이스에서 제공되는 메소드로, 주어진 함수나 코드를 일정한 시간 간격을 두고 함수를 반복적으로 실행시킵니다. 해당 메소드의 문법은 다음과 같습니다.

 

setInterval(code)
setInterval(code, delay)

setInterval(func)
setInterval(func, delay)
setInterval(func, delay, arg0)
setInterval(func, delay, arg0, arg1)
setInterval(func, delay, arg0, arg1, /* … ,*/ argN)

- func : 실행하고자 하는 함수

- delay : 실행하기 전 대기 시간으로, 단위는 밀리초이며 기본 값은 0 입니다. (1000ms = 1s) ⭐️

- arg0, arg1 .. : 타이머가 만료되었을 시에 func에 지정된 함수로 전달되는 추가 인자

 

function sayHi() {
  console.log('Hi');
}

setInterval(sayHi, 1000); // 1초마다 'Hi'를 콘솔에 출력

 

2. setTimeout() 메소드

The global setTimeout() method sets a timer which executes a function or specified piece of code once the timer expires. (출처 : MDN web docs)

setTimeout() 메소드는 일정 시간이 지났을 때 지정된 함수 또는 코드를 실행하는 타이머를 설정합니다. 해당 메소드의 문법은 다음과 같습니다.

setTimeout(code)
setTimeout(code, delay)

setTimeout(functionRef)
setTimeout(functionRef, delay)
setTimeout(functionRef, delay, param1)
setTimeout(functionRef, delay, param1, param2)
setTimeout(functionRef, delay, param1, param2, /* … ,*/ paramN)

- functionRef : 실행하고자 하는 함수(참조 방식)

- delay : 실행하기 전 대기 시간으로, 단위는 밀리초이며 기본 값은 0 입니다. (1000ms = 1s) ⭐️

- param0, param1 .. : 타이머가 만료되었을 시에 functionRef에 지정된 함수로 전달되는 추가 인자

function sayHi() {
  console.log('Hi');
}

setTimeout(sayHi, 1000); // 1초후에 'Hi'를 콘솔에 출력