자바스크립트 주기적인 실행(setInterval, setTimeout)

자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval과 setTimeout 메소드를 사용할 수 있습니다. 두 가지는 비숫하지만 중요한 차이점을 가집니다.

 

- setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다.

 

- setTimeout 함수 : 일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복합니다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다. 지정된 시간 사이에 작업 시간이 추가 되는 것입니다. clearTimeout() 을 사용해서 작업을 중지합니다.

 

- clearInterval(), clearTimeout()이 실행중인 작업을 중지시키는 것은 아닙니다. 지정된 작업은 모두 실행되고 다음 작업 스케쥴이 중지 되는 것입니다.

 

 

1. setInterval 사용예

 

<script type="text/javascript"> //<![CDATA[ // 현재 시간 출력 function PrintTime() {     var today = new Date();     var hh = today.getHours();     var mi = today.getMinutes();     var ss = today.getSeconds();     document.getElementById("result").innerHTML = hh + ":" + mi + ":" + ss; } // 중지를 위해 ID 보관 var timerId = null; // 시계 시작 function StartClock() {     PrintTime();     timerId = setInterval(PrintTime, 1000); } // 시계 중지 function StopClock() {     if(timerId != null) {         clearInterval(timerId);     } } //]]> </script> <!--  시계가 보여질 div --> <div id="result"></div> <input type="button" value="시작" onclick="StartClock();" /> <input type="button" value="중지" onclick="StopClock();" />

 

 

 

"시작" 버튼을 누르면 StartClock() 함수에서 timerId = setInterval(PrintTime, 1000); 을 호출하여 1000ms(1초) 간격으로 PrintTime() 함수를 호출하여 현재 시간을 출력합니다. 이때 반환값을 timerId 변수에 저장해 둡니다. 나중에 중지하는데 사용됩니다.

 

setInterval함수를 호출하기전에 PrintTime()을 한번 호출 하는 이유는 setInterval은 지정된 시간 후에 함수를 실행하기 때문에 "시작" 버튼을 누른 후 1초 후에 출력이 됩니다. 누르자 마자 한번 출력하기 위해서 먼저 호출 합니다.

 

"중지" 버튼을 누르면 StopClock() 함수에서 clearInterval(timerId); 를 호출하여 반복작업을 중지 시킵니다.

 

 

 

2. setTimeout 사용예

 

// 시계 시작 - 재귀호출로 반복실행 function StartClock() {     PrintTime();     timerId = setTimeout(StartClock, 1000); } // 시계 중지 function StopClock() {     if(timerId != null) {         clearTimeout(timerId);     } }

 

"시작" 버튼을 누르면 StartClock() 함수가 호출되고, 내부에서 PrintTime()을 호출하여 시간을 한번 찍습니다. 그후 setTimeout 을 사용해서 1초 후에 StartClock(); 가 다시 실행 되도록 지정합니다. 이때 setTimeout 의 반환값도 중지를 위해서 저장합니다. "중지" 버튼을 누르면 clearTimeout(timerId); 를 사용해서 작업을 중지합니다.

 

 

3. setTimeout을 setInterval과 유사하게 사용하기

 

setInterval은 일정한 시간간격으로 작업을 실행시키는 것이고, setTimeout은 작업 사이의 간격을 일정하게 하는것이 차이점이라고 앞에서 이야기 하였습니다. 

 

setTimeout에서 작업 시작과 스케쥴의 순서를 바꿈으로해서 setInterval 과 유사하게 동작하도록 할  수 있습니다.

 

// 시계 시작 - 재귀호출로 반복실행 function StartClock() {     timerId = setTimeout(StartClock, 1000);     PrintTime(); }

 

이 예는 앞의 예에서 단지 출력과 스케쥴의 순서만 바뀌었습니다. 어떻게 동작하는지 보겠습니다.

 

timerId = setTimeout(StartClock, 1000); 에서 1초 후에 StartClock() 을 호출 하도록 지정합니다. 이 라인은 지정만 하고 바로 반환합니다. 이제 PrintTime()을 호출하여 출력합니다. 1초가 지나면 다시 1초후에 StartCloc()을 실행하도록 지정하고, PintTime()을 호출합니다. 이게 계속 반복됩니다. 

 

이제 앞에서 와는 다르게 1초 기다리는 동안에 PrintTime()에 호출되게 되므로 setInterval과 유사하게 동작합니다. 이렇게 사용할때는 역시 작업이 스케쥴 시간 안에 끝나는것이 중요합니다.