원본: 자바스크립트 타이머 함수: setTimeout, setInterval
스크립트 작성 시 타이밍 이벤트를 사용하여 특정 코드의 실행을 지연시키거나 특정 간격으로 반복할 수 있습니다.
자바스크립트에서는 이러한 작업을 수행하기 위해 setTimeout()과 setInterval() 두 가지 기본 메소드를 제공합니다.
Table of Contents
setTimeout 타이머 함수
이 메소드는 전달된 함수의 실행을 지정된 시간만큼 지연시킵니다.
메소드에서 받는 매개변수는 호출하려는 함수와 함수 실행을 지연할 시간(밀리초) 두 가지입니다.
1초는 1000밀리초(ms)이므로 5000ms는 5초와 같습니다.
코드를 실행하면 지정된 시간이 경과한 후 첫 번째 매개변수의 함수를 한 번 실행합니다.
function delayedFunction() {
alert("Three seconds have elapsed.");
}
const timeoutID = setTimeout(delayedFunction, 3000);
위의 스크립트를 개발자 도구를 사용하여 테스트 해보면 이미지와 같은 화면을 볼 수 있습니다.
코드에서는 먼저 특정 시간이 경과됐을 때 실행할 delayedFunction() 함수를 정의했습니다.
delayedFunction() 함수가 호출되면 “Three seconds have elapsed.”라는 알림창을 alert() 메소드를 통해 보이도록 했습니다.
그 다음 setTimeout() 메소드에 앞에서 정의한 함수를 매개변수로 전달하고 딜레이 값으로 3000을 넣었습니다.
3000 밀리초는 3초 이므로 테스트 코드 실행 후 3초가 지나면 알림창이 뜨게 됩니다.
setInterval() 타이머 함수
이 메소드는 특정한 시간 지연을 두고 지정된 함수를 반복합니다.
매개변수로는 주기적으로 호출하고 싶은 함수와 지연 시간(밀리초)을 전달합니다.
setInterval() 메소드는 중지 명령이 있을 때 까지 계속 반복합니다.
function sendMessage() {
console.log("One second elapsed.");
}
const intervalID = setInterval(sendMessage, 1000);
이번에는 sendMessage() 함수가 호출되면 console.log() 메소드를 사용하여 “One second elapsed.”라는 메시지를 콘솔에 찍게 했습니다.
다음으로 setInterval() 메소드에 sendMessage() 함수를 전달하고 실행 주기를 1000 밀리초로 지정했습니다.
이를 실행하면 1초 마다 콘솔에 메시지를 찍는 것을 확인할 수 있습니다.
clearTimeout, clearInterval
타이밍 이벤트를 중지하는 네이티브 함수입니다.
앞의 섹션에서 각각의 타이머 함수 호출 후 리턴 값을 변수에 저장하는 것을 봤을겁니다.
setTimeout() 메소드나 setInterval() 메소드가 실행되면 인스턴스의 고유한 id를 리턴합니다.
이 값을 변수에 저장했다가 타이머 취소 시 사용할 수 있습니다.
타이머를 중지하려면 각각의 clear 메소드에 id를 전달하면 됩니다. 다음의 예제 코드를 확인해 보겠습니다:
function delayedFunction() {
alert("Three seconds have elapsed.");
}
function clearAlert() {
clearTimeout(timeoutID);
}
const timeoutID = setTimeout(delayedFunction, 3000);
clearAlert();위의 코드를 실행하면 화면상으로는 아무런 동작을 하지 않게 됩니다.
왜냐하면 3초의 딜레이를 가지는 타이머 메소드를 실행한 다음 바로 clearTimeout() 메소드로 타이머의 실행을 취소했기 때문입니다.
setInterval() 메소드 사용 시에도 동일하게 clearInterval() 메소드로 타이머 실행도중 중지시킬 수 있습니다.
코드의 명확성을 위해 타이머 함수 호출을 했다면 적절한 위치에 타이머 중지 함수도 위치시키는 것이 중요합니다.