본문 바로가기

Javascript/Javascript고급

타이머를 이용한 지연 실행과 반복 실행

타이머 함수는 이미지 슬라이드, 시계, 타이머, 반응 대기, 로그인 유지를 위한 시그널 전송, 일정 주기의 화면 갱신 등 일정 시간 후에 실행하거나, 반복적으로 자동 재실행하는 웹 기능을 구현하는데 사용합니다.


자바스크립트는 이런 기능을 이한 전역 함수 2개를 제공합니다.

setTimeout() 은 지연 시간 후 1번 콜백 함수를 실행하고 종료하며, setInterval() 은 지연 시간 간격으로 콜백 함수를 무한 반복 실행합니다.


setTimeout(callback, 지연시간(ms));

setInterval(callback, 지연시간(ms));



callback : 설정한 시간후 실행하는 함수입니다. 타이머 함수안에 직접 구현해도 되고, 별도의 함수를 정의해 이름으로 콜백 함수를 지정할 수 있습니다.


지연시간 : 밀리세컨드 단위입니다. 1000 은 1초입니다.


예를 들어 


setTimeout(function(){
    console.log('타이머 실행!');
}, 3000);


이 타이머는 3초후에 콘솔에 메시지를 실행합니다.



!주의할 점


타이머 함수라는 용어를 사용하지만, 정확하게는 웹브라우저의 전역 윈도우(window) 객체의 메서드입니다.

setTimeout() 은 window.setTimeout() 을 줄여서 사용하는 것입니다. 자바스크립트 전역 객체의 메서드 사용시 "window." 은 생략이 가능하며, 또 실제로 대부분 그렇게 사용합니다.

우리가 전역 함수라고 부르는 또는 별도의 객체명 없이 함수명만으로 사용하는 것들은 모두 윈도우(window) 전역 객체의 메서드(Method)입니다.





지연 실행(setTimeout)


일정 시간 후 콜백 함수를 실행합니다.

콜백 함수 안에 다시 타이머를 넣어 타이머를 중첩 실행할 수 있습니다.

타이머를 해제하려면 타이머 객체 참조가 반드시 있어야 하며, clearTimeout() 메서드로 지연 실행을 해제할 수 있습니다.

따라서, 지연 실행 타이머 설정시 반환되는 타이머 객체 참조를 변수에 저장해 보관해두어야 합니다.


지연 실행 타이머를 중첩 실행 할 경우, 타이머 객체의 참조를 관리하지 못해 메모리 누수가 발생할 수 있으므로, 중첩 실행시에는 타이머 객체 관리에 주의해야 합니다.


지연 실행 타이버를 활용하면 반복 실행 타이머와 같은 기능을 하도록 구현 할 수 있습니다.

반복 실행하는 지연 실행 타이머는(setTimeout) 반복 실행 타이머(setInterval)로 대체가 되지만, 실행 시점에 지연 시간이 가변으로 변하는 경우 지연 실행 타이머를 활용할 수 있습니다.


예를 들어 보겠습니다.


let delay1000;
let timer = setTimeout(callbackFuncdelay);

function callbackFunc(){
  //지연된 기능 실행 코드
  console.log((delay/1000).toString()+'초 후 지연 실행!')
  
  delay *= 2//이전 실행 시간의 2배
  timer = setTimeout(callbackFuncdelay); //지연 실행 설정
}



이렇게 구현한 지연 실행 타이머는 이전 지연 시간의 2배씩 늘어나면서 계속 자기 자신(콜백 함수)을 반복 호출합니다.

만들기에 따라서는 다양한 알람 기능에 활용할 수 있습니다.


조금 더 세련되게 객체 리터럴을 사용해서 지연 실행되는 알람 메시지를 표시하는 객체를 만들어보면 아래와 같이 구현할 수 있습니다.


let alarm = {
    notice: function(delay){
        this.clear();
        this.timer = setTimeout(this.msgdelay*1000);

    },
    clear: function(){
        if(this.timer){
            clearTimeout(this.timer);
            this.timer = undefined;
        }
    },
    msg: function(){
        console.log('alarm!');
    }
}
alarm.notice(3);






반복 실행


일정 시간 주기로 반복 실행하는 기능을 구현할 수 있습니다.

서버에서 일정 시간 주기로 데이터를 가져와 화면에 데이터를 갱신하거나, 로그인 유지를 위해 서버에 주기적으로 시그널을 보내는 용도로 사용할 수 있습니다.

반복 실행 타이버는 해제하지 않으면 계속 실행되며, 콜백 함수에서 에러가 발생할 경우


let timer = setInterval(callbackFunc1000);
let timer2 = setInterval(function(){
    //콜백 실행 코드
}, 1000);


와 같이 사용합니다.

기본적인 setTimeout() 와 동일하며, 시간 간격으로 반복실행되는 차이만 있습니다.




지연 실행과 반복 실행의 정지


지연 실행으로 지연되고 있는 중 이거나, 반복 실행 중인 타이머 객체를 없애주면 지연된 콜백 함수는 해제됩니다.

콜백 함수 해제를 위해서는 실행한 지연 실행, 또는 반복 실행 타이머 객체의 참조를 알아야 합니다.


따라서 지연 실행, 또는 반복 실행을 할 때는 타이머 함수 실행 후 반환되는 객체 참조를 변수에 담아두어야 합니다.


예를 들어


const timer = setTimeout(callbackFunc10000);


이렇게 지연 실행 타이머 객체를 변수에 담아두었다가, 중간에 지연 실행 타이머가 필요 없어진 경우


clearTimeout(timer);


이렇게 타이머 객체를 인자로 해서 clearTimeout() 전역 함수를 실행하면 타이머 객체가 해제 됩니다.


타이머 객체를 해제한 후에는 참조 변수에 undefined 를 적용해 객체가 해제된 것을 표시하는 것을 추천합니다.

타이머 참조 변수가 undefined 인지 여부로 타이머 객체가 해제되었는지를 조건절 체크로 확인할 수 있기 때문에 타이머 관리를 할 때 편리합니다.




반복 실행 순서의 유지


여러 개의 반복 실행하는 콜백 함수를 작성해서 일정 시간 간격으로 실행하는 경우, 당연히 순서대로 계속 반복해서 실행이 될 거라고 예상을 합니다.

그러나 자바스크립트는 같은 시간 주기로 순서대로 실행했다고 해서, 다음번에도 같은 시간 지연 후 같은 순서대로 실행될 것이라는걸 보장하지 않습니다.


다음번 실행 시간이라는 것은 콜백 함수 실행이 끝난 후, 지연 시간만큼 타이머가 다시 도는 것입니다.

콜백 함수의 실행 시간이 길 경우 먼저 실행된 콜백 함수가 더 늦게 반복 실행 대기에 들어갈 수 있습니다.

결국 뒤에 실행된 콜백 함수가 다음번에는 먼저 실행될 수 있습니다.


원격 서버에서 AJAX로 데이터를 받아와 처리를 하는 경우 원격 서버의 지연 등으로 인해 긴 시간 서버의 응답을 대기하게 되는 경우, 이런 현상이 빈번하게 발생합니다.

코드 위치상 앞선  콜백 함수의 결과를 기준으로 나중에 실행하는 콜백 함수의 실행 조건을 변경하는 것은 처음 한번만 실행 순서가 유지될 뿐, 그 다음부터는 실행 순서를 보장할 수 없습니다.


따라서 주기적으로 실행하는 콜백 함수간의 실행 순서가 바뀔 수 있다는 점을 항상 염두해두고 상호 의존하지 않는 코드를 작성해야 합니다.

'Javascript > Javascript고급' 카테고리의 다른 글

셋(Set)의 이해  (0) 2020.05.29
맵(Map)의 이해  (0) 2020.05.29
타이머를 이용한 지연 실행과 반복 실행  (2) 2020.05.29
AJAX 와 JSON  (0) 2020.05.29
XMLHttpRequest 객체 호환성 구현  (0) 2020.05.28
AJAX 비동기 통신 기초(XMLHttpRequest)  (0) 2020.05.28

닫기