setTimeout 과 setInterval (22.11.17 TIL)

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링' 이라고 한다.
호출 스케줄링을 구현하는 방법은 두 가지가 있다.

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

둘 다 문법도 동일하고, 인수 역시 동일하나 setTimeout 이 함수를 단 한 번만 실행하는 것과는 달리, setInterval 은 함수를 주기적으로 실행하게 만든다.

1) setTimeout

setTimeout 은 함수를 단 한 번만 실행한다.

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

//func|code : 실행하고자 하는 코드로, 함수 또는 문자열 형태. 대개는 이 자리에 함수가 들어감.
//delay : 실행 전 대기 시간으로, 단위는 밀리초(millisecond, 1000밀리초 = 1초)이며 기본값은 0
//arg1, arg2 : 함수에 전달할 인수들로, IE9 이하에선 지원하지 않음.

setTimeout 을 호출하면 '타이머 식별자 (timer identifier)' 가 반환된다. 스케줄링을 취소하고 싶을 땐 이 식별자를 사용하여 clearTimeout 에 넣어주면 된다.

let timerId = setTimeout(...);
clearTimeout(timerId);

 

중첩 setTimeout 을 사용하면 명시한 지연(100ms) 이 보장된다. 이렇게 지연 간격이 보장되는 이유는 이전 함수의 실행이 종료된 이후에 다음 함수 호출에 대한 계획이 세워지기 때문이다.

/** setInterval을 이용하지 않고 아래와 같이 중첩 setTimeout을 사용함
let timerId = setInterval(() => alert('째깍'), 2000);
*/

let timerId = setTimeout(function tick() {
  alert('째깍');
  timerId = setTimeout(tick, 2000); // (*)
}, 2000);

중첩 setTimeout 을 이용하는 방법은 지연 간격을 보장하지만 setInterval 은 이를 보장하지 않는다.

2) setInterval

//setTimeout 과 동일한 문법

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

setTimeout 과 동일한 문법을 사용하지만 setInterval 은 함수를 주기적으로 실행하게 만든다. 함수 호출을 중단하려면 clearInterval 을 사용하면 된다.

// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);

// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);

 

setInterval 을 사용하면 func 호출 사이의 지연 간격이 실제 명시한 간격(100ms) 보다 짧아진다. 이는 func 을 실행하는 데 소모되는 시간도 지연 간격에 포함시키기 때문이다. 따라서 함수 호출에 걸리는 시간이 매번 delay 밀리초보다 길면, 모든 함수가 쉼 없이 계속 연속 호출된다.

 

 

참고 : 

setTimeout과 setInterval을 이용한 호출 스케줄링