[Javascript] setInterval()

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

1. setInterval 사용예

<script type="text/javascript">

// 현재 시간 출력

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 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); 를 호출하여 반복작업을 중지 시킵니다.