자바스크립트 타이머 함수 총정리!(setTimeout, setInterval...)

오늘은 자바스크립트의 타이머 함수를 총정리해보도록 하겠습니다. 

웹 개발을 하다 보면, 다양한 상황이 발생하는데요.

 

다음과 같은 상황이 발생한다고 가정해보겠습니다. 

1. 특정시간마다 특정 함수를 실행시키고 싶은 경우

→ 1초마다 1번씩 정보를 취득하고 싶은 경우

 

2. 이벤트가 발생하면 어떤 함수를 지정한 시간 이후에 실행하고 싶은 경우

→ 확인 메세지를 출력하고 나서 반응이 없다면 몇 초 후에 특정 페이지에 이동시키고 싶은 경우

 

- 타이머 함수

타이머 함수는 특정 시간에 특정 함수를 실행할 수 있도록 해주는 자바스크립트 내장 함수입니다. 

 

method	설명
setTimout(function, millisecond)	일정 시간 후 함수를 한번 실행합니다.
setInterval(function, millisecond)	일정 시간마다 함수를 반복 실행합니다.
clearTimeout(id)	일정 시간 후 함수를 한번 실행하는 걸 중지합니다.
clearInterval(id)	일정 시간마다 함수를 반복하는 것을 중지합니다.

 

위의 표에 나와있는 함수들을 차례대로 알아보도록 하겠습니다.

 

- setTimeout(function, millisecond), 일정 시간 후 함수를 한 번만 실행

- 형식

setTimeout(function(){
   실행할 문장
}, millisecond)

function setTimeoutFunc(){
    setTimeout(function(){
        alert("버튼을 누른지 2초 후에 실행되었습니다.");
    }, 2000)
}

다음과 같이 자바스크립트에 setTimeoutFunc() 함수를 만들고, html에는 버튼을 만들어 버튼이 눌리면

setTimeoutFunc() 함수를 실행하도록 했습니다. 

 

버튼을 누르게 되면 2초 후에 alert 메세지가 표시됩니다. 

setTimeoutFunc 결과

- setInterval(function, millisecond), 일정 시간마다 함수를 반복 실행

- 형식

setInterval(function(){
  실행할 문장
}, millisecond)

var count = 0;
function setIntervalFunc(){
    setInterval(function(){
        alert(++count  + "번째 실행되고 있습니다.");
    }, 2000)
}

다음과 같이 자바스크립트에 setIntervalFunc() 함수를 만들고, html에는 버튼을 만들어 버튼이 눌리면

setIntervalFunc() 함수를 실행하도록 했습니다. 

 

버튼을 누르게 되면 2초 마다 alert 메시지가 표시됩니다. 

setIntervalFunc 결과

위와 같이 setTimeout, setInterval를 통해 타이머를 세팅하는 함수를 사용하여, 결과를 확인해봤습니다.

여기서 끝이 아니라 타이머를 세팅했으면 세팅한 타이머를 삭제하는 함수도 알아봐야 할 필요가 있습니다.

 

예를 들어, 확인 메세지를 5초마다 표시하는 경우, 유저가 확인을 한 경우에는 표시하지 않아야 하지만, 

setInterval의 경우는 계속해서 표시하기 때문에 세팅을 삭제할 필요가 있습니다. 

 

또한, 계속해서 타이머를 사용할 경우에는 지속적으로 실행하므로 컴퓨터의 자원도 계속해서 소비됩니다.

 

- clearInterval(id), 일정 시간마다 함수를 반복하는 것을 중지

- 형식

clearInterval(타이머)

var count = 0;
var intervalVar = setInterval(function(){
    alert(++count  + "번째 실행되고 있습니다.");
}, 2000)

setTimeout(function(){
    clearInterval(intervalVar);
}, 10000);

먼저, 위의 setInterval를 함수에 넣고 실행하도록 변경했습니다. 

이렇게 한 이유는 clearInterval의 경우는 매개변수가 타이머 ID이기 때문입니다. 

 

alert 메세지가 5번 표시되고, 그 이후로는 타이머를 클리어해서 표시되지 않도록 했습니다. 

 

- clearTimeout(id), 일정 시간 후 함수를 한번 실행하는 걸 중지

- 형식

clearTimeout(타이머)

 

물론, setTimeout의 경우에도 클리어 함수는 존재합니다. 하지만, clearTimeout은 setTimeout을 중지시키는 역할을 하기 때문에 setTimeout이 실행되기 전에 clearTimeout이 실행되지 않으면 무효가 됩니다. 

 

이렇게 해서 자바스크립트 타이머 함수에 대하여 알아봤습니다.

도움이 되셨다면 구독 부탁드립니다!