[Javascript] setInterval, setTimeout

웹 페이지에서 통계 자료를 보여주는데, 해당 페이지에 체류하는 시간이 길어 정보를 업데이트 하기 위한 새로고침 기능이 필요했다.

 

일전에 함수 호출 시간을 지연시켜 페이지의 다른 요소들을 먼저 로드한 후에 함수를 호출하기 위해서 자바스크립트의 setTimeout 함수를 통해 작업을 수행했었다.

---

setTimeout을 이용해 구현한 3초 간격 페이지 로드(새로고침)

 

$(function(){
    setTimeoutSample();
});

function setTimeoutSample() {
    console.log('setTimeout test : ' + Date());
    setTimeout('location.reload()', 3000);
}

 

개발자 모드로 확인한 setTimeout 함수 호출에 대한 console.log

 

페이지 로드하면 setTimeoutSample() 함수를 호출하고 3초 뒤에 location.reload()로 페이지를 새로고침 한다. 물론 페이지를 새로고침 하게 됐을 때에는 이 방법으로도 반복적인 기능 수행이 가능했지만, setTimeout은 1회성으로 호출하는 성질을 갖고 있기 때문에, 새로고침이 아닌 경우 특정 주기마다 반복적으로 수행할 수 있는 setInterval 함수를 사용하는 것이 좋다.

 

setTimeout(p1, p2)
=> 1회성

setInterval(p1, p2)
=> 반복

p1에 호출할 기능, p2에는 시간이 들어간다. 아래 예시를 통해 차이점을 비교해보자. 간단하게 console log를 통해 setTimeout과 setInterval의 기능적 차이를 이해할 수 있다.

---

setTimeout (기능 1회 수행)

 

$(function(){
    setTimeoutSample();
});

function setTimeoutSample() {
    console.log('first setTimeout : ' + Date());
    setTimeout("console.log('setTimeout test : ' + Date())", 3000);
}

 

setTimeout을 통한 console log. 3초 이후 한 번만 수행된다.

 

---

setInterval (기능 반복 수행)

 

$(function(){
    setIntervalSample();
});

function setIntervalSample() {
    console.log('first setInterval : ' + Date());
    setInterval("console.log('setInterval test : ' + Date())", 3000);
}

 

. setInterval을 통한 console log. 3초 간격으로 반복된다.