[javascript] 자바스크립트 setTimeout()과 setInterval() 함수 사용법

 자바스크립트에서 시간을 이용한 코드를 짜다 보면 빠질 수 없는 것이 setTimeout()과 setInterval()이다.

setTimeout() 함수는 일정시간을 기다린후 행동을  실행할 때 쓰이게 되고  setInterval() 함수는 함수를 일정시간의 텀으로  반복할때 이용된다.

 setTimeout()

var timerId = "";	
function timeout() {
    timerId = setTimeout(function() {
        $("a[href='#search']").trigger( "click" );
    }, 1000 * 2);
    clearTimeout(timerId);
}
timeout();

 
setTimeout()을 이용하면 내가 지정한 시간이 지난후에 행동을 실행 한다.
시간설정 단위는 1000이 1초를 의미하며 이 코드의 경우 1000*2를 했기에 2초 후에 검색트리거가 요청된다. 

함수가 실행된 이후에는 생성한 타이머 식별을 위해 id값이 반환된다.
이 id값은 clearTimeout()을 통해 타이머를 취소할 수 있다.

setInterval()

var timerId = "";
function interval() {
    console.log('interval');
    timerId = setInterval(function() {
        console.log('setInterval :(' + timerId + ')');
        $("a[href='#search']").trigger( "click" );
    }, 1000 * 60);
}
interval();

setInterval()을 이용하면 내가 지정한 시간마다 행동을 반복한다.
setTimeout()과 마찬가지로 interval Id를 반환하기에 나중에 clearInterval() 함수를 호출해 interval을 제거할 수도 있다.
 
 

응용

<label class="checkbox col col-3 pull-right" style="text-align: right">
<input class="checkbox style-2" type="checkbox" id="autoRefresh" name="autoRefresh" value="">
<span>1분 업데이트</span>
</label>

모니터링을 해야 하는 게시판에 1분 업데이트 기능을 넣어보았다.
체크박스를 체크할 경우 1분마다 함수가 반복되고 검색이 진행돼 새로운 글들이 보일 것이다.
 

$("input:checkbox[name='autoRefresh']").click(function(e){
    console.log(' autoRefresh');
    if($("input:checkbox[name='autoRefresh']").is(":checked") == true){
        alert("1분마다 자동 업데이트됩니다.");
        interval();
    }else{
        console.log(' clearInterval:'+timerId);
        alert("자동 업데이트가 취소되었습니다.");
        clearInterval(timerId);
    }
});

체크박스를 체크하면 인터벌이 실행이 되고 체크박스를 취소하면 clearInterval()을 통해 인터벌을 제거해 준다.

 
인터벌의 경우 코드를 여러 번 요청할 경우 웹브라우저가 뻗을 만큼 큰 부하를 일으킬 수 있으니 조심해서 이용하는 것이 좋을 듯하다.