비동기 호출 (3) Timer API

비동기 호출 (1) callback 함수
비동기 호출 (2) 동기(sync) vs 비동기(async) 
비동기 호출 (3) Timer API

비동기 방식에 대해 배웠으니, 이제 비동기 호출 함수를 이용하는 Timer API에 대해 알아보도록 하자. 여기서 Timer란 일정한 주기마다 특정 함수를 실행시키는 함수를 의미한다. Timer API의 세 가지 대표적인 메서드(setTimeout, setInterval, clearInterval )는 어떤 식으로 사용할 수 있는지 간단히 소개하려고 한다.

 

setTimeout(callback, millisecond)

---

setTimeout은 일정 시간 후에 함수를 한번 실행하는 메서드이다. 타이머가 만료된 뒤, 함수나 지정된 코드를 실행하게 만들어준다. clearTimeout() 을 사용하면 실행을 중지할 수 있다.

 

매개변수 : function(실행할 callback 함수), delay(callback함수 실행 전 기다려야할 시간, 밀리초 단위)
리턴값 : 임의의 타이머 ID

var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]); 

setTimeout(function(){ }, delay); setTimeout(function(){
	console.log('1초 후 실행'); 
}, 1000); 
// 23123 (임의의 ID)

 

setInterval(callback, millisecond)

---

setInterval은 일정 시간을 간격으로 함수를 반복 실행하는 메서드이다. 뒤에 나오는 clearInterval 함수를 사용하면 중지할 수 있다. 실행되는 작업이 시간 간격보다 오래걸리면 문제가 생길 수 있기 때문에 주의해야 한다!

 

매개변수 : function(실행할 callback 함수), delay(반복 시간 간격, 밀리초 단위
리턴값 : 임의의 타이머 ID

var intervalID = scope.setInterval(func, [delay, arg1, arg2, ...]); 

setInterval(function(){ }, delay);

 

참고로 위와 같이 변수에 담아서 사용하는 이유는, 나중에 반복 실행을 멈추고 싶을 때 clearInterval의 인자로 타이머 ID값을 넘겨줌으로써 중지하기 위해서이다.

 

setInterval(function(){ 
	console.log('1초 후 실행'); 
}, 1000); 

// 34522 (임의의 ID)

 

clearInterval(timerId)

---

clearInterval은 반복 실행 중인 타이머를 종료하는 메서드이다. 실행 중인 '타이머'를 중지시키는 것이지, 실행중인 '작업'을 중지시키는 것이 아니기 때문에, 이미 지정된 작업은 모두 실행되고 그 다음 작업이 중지 된다.

 

매개변수 : 타이머 ID
리턴값 : 없음

var timer = setInverval(function(){
	console.log('1초 마다 실행'); 
}, 1000); 
clearInterval(timer); 
// 더 이상 실행하지 않음

 

이렇게 세 가지 메서드만 알아둬도 반복적인 작업을 일정한 간격으로 실행시키고 싶은 경우, 비동기적으로 작업들을 처리하고 싶은 경우에 충분히 활용할 수 있을 것 같다. 이런 API를 어디서 어떤식으로 사용하는지에 대해서도 좀 더 알아보고 포스팅해야겠다.