[Javascript] Timer : setTimeout, setInterval 함수

: 자바스크립트에서는 시간에 따라 함수를 호출할 수 있는 함수가 2가지가 있다.

• setInterval(callbackFunction, milliseconds);
• setTimeout(callbackFunction, milliseconds);

: setInterval은 말그대로 특정 interval을 두고 콜백함수를 계속 호출하는 함수이고, setTimeout은 일정 시간뒤에 함수를 호출하게 되는 1회성 함수이다. 즉, 계속 반복적으로 일정 시간마다 호출해야한다면 setInterval을 설정하면 되고 한번만 호출해야된다면 setTimeout을 사용하면 된다.

: 위 함수와 반대로 설정된 함수 호출을 취소하는 함수는 아래의 두가지이다.

• clearInterval(intervalReturnVariable);
• clearTimeout(timeoutReturnVariable); 

: : 여기서 인자로 받게 되는 값은 위의 setInterval이나 setTimeout함수를 호출하고나서 받은 리턴 값을 넣어주면 된다. 그럼 해당하는 함수 호출 예약은 지워지게 된다.

: 아래는 setInterval을 이용해서 간단하게 구현한 예이다. 버튼을 누르면 일정시간마다 div의 내용을 업데이트하는 소스이다.

Pending

<script>
    var pendingInterval = false;
    function setPending() {

        if (!pendingInterval) {
            pendingInterval = setInterval(startPending, 1000);
        } else {
            clearInterval(pendingInterval);
            pendingInterval = false;
        }
    }
    function startPending() {
        var div = document.getElementById("pending");
        if (div.innerHTML.length > 12) {
            div.innerHTML = "Pending";
        }
        div.innerHTML += ".";
    }
</script>
<button onclick="javascript:setPending();">Toggle Pending</button>
<div id="pending">Pending</div>

: 이렇게 다양한 활용이 가능하지만 setTimeout은 responsive html을 위해 요긴하게 사용할 수 있을 것이다. HTML5 튜토리얼 이후에 자바스크립트 강좌를 하게 되면 고급 강좌로 high performance 자바스크립트와 함께 다뤄보고자 한다.

끝.