Timer(JavaScript)

# Timer

주기적으로 임의의 function() 실행되도록 로직을 작성하는데 유용하게 사용

- setTimeout(function(), milliseconds)

- setInterval(function(), milliseconds)

- clearInterval(timer id)

# setTimeout(function(), milliseconds)

- 특정 시간 이 후, 단 한번만 특정 함수 또는 코드를 실행시킬 때 사용

- 두번째 인자의 시간(Milliseconds)이 경과하면 1번째 인자의 함수를 실행

 

sample 01)

<script type="text/javascript">

    $(document).ready(function() {
        ...
     
        setTimeout("timer_test()", 3000); // 3000ms(3초) 경과 시, timer_test() 함수 실행
     
        ...
    });
 
    function timer_test() {
        location.href = "http://google.com"; // google.com으로 이동
    }
 
</script>

위의 sample 01은 setTimeout()의 첫번째 인자로 function을 호출하고 있는데, 재사용이 필요하지 않은 경우라면 sample 02처럼 function 정의 자체를 첫번째 인자 내에 구현할 수 있다. 

※ 1000ms is 1second

sample 02) sample 01의 익명 함수(Anonymous Function)화

<script type="text/javascript">
 
    $(document).ready(function() {
      
      ...
 
    setTimeout(function() {
        location.href = "http://google.com";
    }, 3000);
     
     ...
     
    }
 
</script>

※ sample 02와 같이 함수의 이름없이 간결하게 작성된 함수를 익명 함수(Anonymous Function)라 한다.

# setInterval(function(), milliseconds)

- 특정 시간 마다 특정 함수 또는 코드를 실행시킬 때 사용

- 두번째 인자의 시간(Milliseconds)이 지날때 마다 첫번째 인자의 함수를 실행

sample 03)

<script type="text/javascript">
 
    var sum = 0;
    $(document).ready(function() {
        ...
     
    setInterval("interval_test()", 5000); // 매 5초가 지날 때마다 timer_test() 함수를 실행
     
        ...
     
    });
 
    function timer_test(){ // 이 함수는 5초마다 실행
        sum += 1; // 매 5초마다 숫자 1을 sum 변수에 더함
    }
 
</script>

sample 04) sample 03의 익명 함수(Anonymous Function)화

<script type="text/javascript">
 
    var sum = 0;
 
    $(document).ready(function() {
    
        ...
 
    setInterval(function() {
        sum += 1; // 매 5초마다 숫자 1을 sum 변수에 더함
    }, 5000); // 5000ms(5초)가 경과하면 함수 실행
 
        ...
        
}); 
 
</script>

# clearInterval(timer id)

- setInterval() 함수를 사용하면 페이지가 바뀌거나 refresh 되기 전까지 무한정 함수가 반복 실행됨

- setInterval() 함수의 동작을 멈출때 clearInterval() 함수 사용

※ setInterval 함수 실행 시, 반드시 return 값 (Timer ID)을 반환값으로 갖고있어야 한다.

sample 05)

<script type="text/javascript">
 
    var timerId = 0;
    $(document).ready(function() {
        timerId = setInterval("interval_test()", 5000); 
        
        document.getElementById('stop_timer').onclick = function() {    // 인라인 함수
        clearInterval(timerId);        // timerId 값을 인자로 입력하여 해당 setInterval 종료
        }
    });
    
</script>

example source) 5분동안 10초 간격으로 doSomething 함수 실행 로직

...
 
startTimer(5);
 
...
 
 
 
 
var milliSecond_interval = "10000";
 
function startTimer(duration) {
    var timerId = 0;
    
    // 매 10초마다 doSomething() 실행
    timerId = setInterval("doSomething()", milliSecond_interval);
    
    // duration 경과, refresh 함수 종료
    setTimeout("stopDoing(" + timerId + ")", 60000 * duration); 
}
 
function doSomething() {
    // TODO
}
 
function stopDoing(timerId) {
    clearInterval(timerId);
}

- 참고 : http://ooz.co.kr/194