javascript setInterval(), setTimeout(), clearInterval() 자바스크립트 타이머 구현 일정시간마다 특정기능 실행

 

javascript setInterval(),  setTimeout(), clearInterval() 자바스크립트 타이머 구현  일정시간마다 특정기능 실행

 

개발을 하다보면 특정 시간마다 함수를 반복적으로 실행해야 할 때가 있다.

이럴때 사용하는것이 setInterval() 이다.

 

setInterval() 메소드는 clearInterval()가 호출되거나 창이 닫히기 전까지 무한 반복 된다.

 

특정 시간 이후에 오직 한번만 실행해야 할 때에는 setTimeout() 메소드를 사용한다.

 

여기서 사용하는 시간은 밀리세컨트(milliseconds)를 사용한다. (1000ms = 1 second)

 

사용예1) 30초마다 refresh 하기

-- html

<a href="javascript:refresh()" class="time"><img src="${ctx }/images/btn_reload.png" alt="새로고침" /><em id="time">30</em></a>
 
--javascript
 
var count = 30;
 
$(function(){ 
    setInterval(function() {
        if (count==00){
            count=30;
            반복할 함수();
        }
        count -= 1;  // 1씩 감소
        if (count<10){
            count = "0"+count;  // 9->09로
        }
        $("#time").text(count);  //카운트값 바꾸기
    }, 1000); // 1000ms(1초)마다 함수 실행 - 카운트다운 
});

위처럼 구현하게 되면 30부터 1씩 숫자가 줄어 0이 되면 특정 함수를 반복하게 된다.

 

참고)

복수의 카운트값을 제각기 돌리기 위해서는 배열을 사용하거나

eval()을 사용하여 동적으로 변수를 생성해 사용한다. eval()함수 사용법은 아래의 Link를 참조한다.

 

Link: eval()함수 사용법 동적으로 변수 생성

 

사용예2) 복수의 카운트

 

for (var i=0; i<10; i++){ //임의로 변수 생성 data.length보다 크게
     eval("var count"+i+"=30");
}
 
$(function(){ 
 
 setInterval(function() {
      for(var i=0; i<data.length; i++){
           if (eval("count"+i)==00){
                eval("count"+i+"=30"); 
                반복할 함수();
 
           }
           eval("count"+i+"-=1");   // 매 5초마다 숫자 1을 sum 변수에 더합니다.
           if (eval("count"+i)<10){
                eval("count"+i+"="+"0"+eval("count"+i)).toString();
           }
           $("#time"+i).text(eval("count"+i));
       }
  }, 1000); // 1000ms(1초)가 경과하면 이 함수가 실행합니다.
});

 

위의 사용예1에서 count 변수가 하나 사용되었다면 사용예2에서는  data.length 갯수만큼 변수를 사용한다.

두 코드를 비교하면 eval() 함수의 사용법을 이해하는데 도움이 될 것이다.

 

다시한번 말하지만 배열을 사용하게 편리한듯 하다.