[Javascript] setTimeout과 setInterval

호출 스케줄링

일정시간이 지난 후 원하는 함수의 호출을 예약하는 것을 호출 스케줄링(scheduling a call) 이라고 함.

 

setTimeout과 setInterval을 이용하여 호출 스케줄링을 실행할 수 있지만 두 함수는 아래와 같은 차이가 있음.

• setTimeout: 일정시간이 지난 후 함수를 한번 호출함
• setInterval: 일정시간 간격을 두어 함수를 지속적으로 호출함

 

 

setTimeout

setTimeout은 아래와 같이 사용할 수 있음

setTimeout( func[ , dely, arg1, arg2 ... ] )

• func: 전달할 함수
• delay: 실행 전 대기시간. miliseconds 단위 (기본값은 0)
• arg: 함수에 전달할 인자

 

setTimeout으로 몇초후 실행되었는지 콘솔에 출력

function timeout(time){
	console.log(`${new Date().getSeconds() - time } 초 후 실행`)
}
let now_sec = new Date().getSeconds();

let time_out = setTimeout(timeout,2000,now_sec);

time_out;

딜레이에 2000, 즉 2 초를 주어서 2초후에 실행된 것을 볼 수 있음

 

 

clearTimeout(timeoutFunc)을 사용하면 스케줄링을 취소시킬 수 있음

 

function timeout(time){
	console.log(`${new Date().getSeconds() - time } 초 후 실행`)
}
let now_sec = new Date().getSeconds();

let time_out = setTimeout(timeout,2000,now_sec);

time_out;
clearTimeout(time_out);
console.log("스케줄링이 취소됨");

time_out 함수가 실행되지 않은것을 볼 수 있음

 

 

setInterval

setInterval은 setTimeout과 다르게 지정한 시간만큼 간격을 두어 지속적으로 전달한 함수를 실행함

 

setInterval은 setTimeout과 같은 문법으로 사용할 수 있음

setInterval( func[ , dely, arg1, arg2 ... ] )

 

setInterval을 이용하여 함수를 지속적으로 실행(clearInterval은 interval로 생성한 스케줄링을 취소할 수 있음)

let cnt = 0;

function addCnt(){
	
    cnt++;
    console.log(`${cnt}`);
}

let interval = setInterval(addCnt,1000); // 1초마다 addCnt함수를 호출

//setTimeout에 clearInterval함수를 전달하여 5초후 interval 종료하도록 설정
setTimeout(clearInterval,5000,interval);

 

함수가 5초후 종료되기 전까지 1초간격으로 5번 실행됨

 

 

중첩 setTimeout

setTimeout을 중첩으로 사용하면 setInterval과 같이 함수를 지속적으로 실행시킬 수 있음

 

위의 interval과 같이 1초간격으로 5초간 함수를 지속적으로 실행

let cnt = 0;



let timeout = setTimeout(function addCount(){
	
    if(cnt === 5){
    	console.log(`스케줄링 종료`);
    }else{
      cnt++;
      console.log(`count : ${cnt}`);
      timeout = setTimeout(addCount,1000)
    }
},1000);

 

 

setInterval 과 중첩 setTimeout의 차이점은 아래와 같음

• setInterval: setInterval은 함수의 로직이 실행되는데 소모되는 시간도 지연 시간에 포함시킴
• 중첩 setTimeout: setTimeout은 함수가 종료된 시점부터 지연 시간으로 인식

위와 같은 차이로 인해 setInterval로 함수를 지속적으로 스케줄링 시 함수 호출 사이의 간격이 실제 명시한 시간보다 짧아질 수 있음

 

참조: https://ko.javascript.info/settimeout-setinterval