Javascript / 비동기 호출의 개념, 타이머 API 기본

 

1. 비동기 호출(Asynchronous Call)

 

비동기 호출이란, 음식점에서의 주문 시스템에 비유해서 설명될 수 있다.

 

고객에게 주문을 받고(A) - 음식을 만들고(B) - 음식을 대접하는(C) 과정이 필요하다면,

고객 1명의 요청마다 A, B, C 과정을 차례대로 처리하여 과정을 완료하고 그 다음 고객의 주문을 받지는 않는다.

고객에게 주문을 받고, 요리가 만들어지는 동안에 또 다른 고객의 주문을 받게된다.

 

프로그램에서도 이와 마찬가지로, 하나의 함수(프로그램)이 실행되는 도중에 다른 프로그램이 동작하도록 호출하는 것을 비동기호출 이라고 한다.

 

정확한 이해를 위해서는 컴퓨터의 작동 구조와 프로세스(스레드)의 이해가 필요하지만, 여기서는 개념만 짚고 넘어가도록 한다.

 

 

*동기, 비동기식 처리 모델( 출처 : https://poiemaweb.com/js-async)

 

 

 

---

 

2. 타이머 API

비동기식 처리에 쓰일 수 있는 타이머 API로, setTimeout, setInterval, clearInterval 에 대해 알아보자.

 

2-1. setTimeout

아래와 같이 함수를 작성하면, callback 함수가 호출되고 지정한 millisecond 후에 함수를 실행하게 된다.

setTimeout(callback, millisecond)

예제)

setTimeout(function() {
  console.log('10초 후 함수 실행!')
}, 10000)

 

 

2-2. setInterval

일정 시간의 간격을 두고 함수를 반복적으로 실행한다.

setInterval(callback, millisecond)

예제)

setInterval(function() {
  console.log('5초마다 함수 실행!')
}, 5000)

2-3. clearInterval

반복 실행중인 타이머를 종료한다.

clearInterval(timerId)

예제)

let timer = setInterval(function() {
  console.log('5초마다 함수 실행!')
}, 5000)
 
clearInterval(timer);