setTimeout과 setInterval을 이용해 카운트 다운 만들기
일정 시간이 지난 후에 원하는 함수를 예약실행(호출)할 수 있게 하는 것을 '호출 스케줄링'이라고 합니다.
호출 스케줄링을 구현하는 방법은 두 가지가 있습니다.
setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법setinterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
1. setTimeout
let timerId = setTimeout(func|code, [dalay], [arg1], [arg2], ...)매개변수
func|code
실행하고자 하는 코드로, 함수 또는 문자열 형태입니다. 대개는 이 자리에 함수가 위치합니다.
하위 호환성을 위해 문자열도 받을 수 있게 해놓았지만 추천하진 않습니다
dalay
실행 전 대기 시간으로, 단위는 밀리초(millisecond, 1000밀리초 = 1초)이며 기본값은 0입니다.
arg1, arg2
함수에 전달할 인수들입니다.
예제
function sayHi() {
alert('안녕하세요.');
}
setTimeout(sayHi, 1000);위 코드를 실행하면 1초 후에 sayHi()가 호출됩니다.
❗️함수를 실행하지 말고 넘겨야 합니다.
setTimeout에 함수를 넘길 때, 함수 뒤에 ()를 붙이는 실수를 하곤 합니다.say()를 인수로 전달하면 함수 실행 결과가 전달되어 버립니다.
아래 코드 처럼 함수에 인수를 넘겨줄 수도 있습니다.
unction sayHi(who, phrase) {
alert( who + phrase );
}
setTimeout(sayHi, 1000, "호두야", "안녕"); // 호두야, 안녕.되도록 다음 예시처럼 익명 화살표 함수를 사용하는 것을 권장합니다.
setTimeout(()=> alert('안녕하세요.'), 1000);clearTimeout으로 스케줄링 취소하기
setTimeout을 호출하면 '타이머 식별자'가 반환됩니다. 스케줄링을 취소하고 싶을땐
이 식별자(timerId)를 사용하면 됩니다.
let timerId = setTimeout(...);
clearTimeout(timerId);2.setInterval
setInterval메서드는 setTimeout과 동일한 문법을 사용합니다.
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)setTimeout이 함수를 단 한번만 실행하는 것과 달리 setInterval은 함수를 주기적으로 실행하게 만듭니다.
함수 호출을 중단하려면 clearInterval(timeId)을 사용하면 됩니다.
// 2초 간격으로 메시지를 보여줌
let timerId = setInterval(() => alert('째깍'), 2000);
// 5초 후에 정지
setTimeout(() => { clearInterval(timerId); alert('정지'); }, 5000);위 코드를 실행하면 메시지가 2초 간격으로 보이다가 5초 이후에는 더 이상 메시지가 보이지 않습니다.
3. 중첩 setTimeout
무언가를 일정 간격을 두고 실행하는 방법에는 크게 2가지가 있습니다.
하나는 setInterval을 이용하는 방법이고, 다른 하나는 중첩 setTimeout을 이용하는 방법입니다.
/** setInterval을 이용하지 않고 아래와 같이 중첩 setTimeout을 사용함
let timerId = setInterval(() => alert('째깍'), 2000);
*/
let timerId = setTimeout(function tick() {
alert('째깍');
timerId = setTimeout(tick, 2000); // (*)
}, 2000);setTimeout은 (*)표시한 줄의 실행이 종료되면 다음 호출을 스케줄링합니다.
중첩 setTimeout을 이용하는 방법은 setInterval을 사용하는 방법보다 유연합니다. 호출 결과에 따라 다음 호출을 원하는 방식으로 조정해 스케줄링 할 수 있기 때문입니다.
중첩 setTimeout을 이용하는 방법은 지연 간격을 보장하지만 setInterval은 이를 보장하지 않습니다.
요약
-
setInterval(func, delay, ...args)과 setTimeout(func, delay, ...args)은 delay밀리초 후에 func을 규칙적으로, 또는 한번 실행하도록 해줍니다.
-
setInterval·setTimeout을 호출하고 반환받은 값을 clearInterval·clearTimeout에 넘겨주면 스케줄링을 취소할 수 있습니다.
-
중첩 setTimeout을 사용하면 setInterval을 사용한 것보다 유연하게 코드를 작성할 수 있습니다. 여기에 더하여 지연 간격 보장이라는 장점도 있습니다.
