자바스크립트 SetTimeout()과 SetInterval()

자바스크립트 SetTimeout()과  SetInterval()

 

글. 수알치 오상문

 

1) 1회용 setTimeout( )

 

setTimeout( )은 지정한 시간(1/1000초 단위) 이후에 설정한 콜백함수를 호출한다.

window.setTimeout()이라고 사용해야 하지만 기본 전역 함수이므로 setTimeout()이라고 작성해도 된다.

 

setTimeout( )  <--  window.setTimeout( )

 

setTimeout에는 두 전달인수가 필요하다. 지정한 시간이 지난 뒤 호출될 함수(콜백 함수)와 기다릴 시간이다.

아래 예제는 콜백 함수를 인라인으로 직접 작성하고 있다. 1000은 기다리는 시간인데 1/1000초 단위이므로 1초이다.

 

function run() {    
    setTimeout( function() {
        var msg = "setTimeout message...";
        console.log(msg);  
    }, 1000); // 1초(1000) 후에 동작
}
console.log("run() start...")
run();
console.log("run() end...");

 

[실행 결과]

"run() start..."

"run() end..."

"setTimeout message..."   <-- 1초 후에 동작한 메시지 출력 

 

 

2) 주기적으로 동작하는 setInterval( )

 

다음 예제는 setInterval( ) 함수를 이용하여 1초마다 주기적으로 동작한다.

function run() {    
    setInterval(function() {
        var msg = "setInterval message...";
        console.log(msg);  
    }, 1000); // 1초(1000) 후에 동작
}
console.log("run() start...")
run();
console.log("run() end...");

[실행 결과]

"run() start..."

"run() end..."

"setInterval message..."   <-- 1초 간격으로 메시지 출력 

"setInterval message..."   <-- 1초 간격으로 메시지 출력 

"setInterval message..."   <-- 1초 간격으로 메시지 출력 

...