[javascript] 비동기 - 타이머 API

비동기 중 타이머 API 에 대해 공부했다.  비동기라는게 실감이 잘 안났었는데 여러가지 예제 코드를 보며 이해 할 수 있었다 ! 

 

자바스크립트에서 비동기는 타이머 관련 API 를 통해 구현할 수 있다 . 해당 API 는 브라우저에서 제공하는 Web API이며 비동기로 작동하도록 구성되어 있다.  그럼 예제 코드를 살펴보면서 타이머 API 를 공부해보자 !  

 

setTimeout( callback , millisecond) 

일정 시간 후에 함수를 실행한다.

매개변수로는 실행할 콜백함수 , 콜백함수 실행 전 기다려야 할 시간 ( 밀리초) 을 받으며 리턴값은 임의의 타이머 ID이다. 

setTimeout(function () {
  console.log('2초 후 실행');
}, 2000);

 

clearTimeout(timerId)

setTimeout 타이머를 종료한다. 

매개변수로는 타이머 ID 를 받으며 리턴값은 없다 .

const timer = setTimeout(function () {
  console.log('10초 후 실행');
}, 10000);
clearTimeout(timer);

 

setInterval( callback , millisecond)

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

매개변수로는 실행할 콜백함수, 반복 수행을 위한 시간 간격(밀리초) 을 받으며 리턴값은 임의의 타이머 ID이다.

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

  

 

clearInterval( timerId) 

setInterval 타이머를 종료한다 

매개변수로는 타이머ID를 받으며 리턴값은 없다. 

const timer = setInterval(function () {
  console.log('1초마다 실행');
}, 1000);
clearInterval(timer);

 

---

비동기 코드는 작성 순으로 작동되지 않고 , 동작이 완료되는 순서대로 작동하게 된다. 
즉 예측 불가능하다. 

 

위의 특징을 기억하고 비동기 코드를 제어할 수 있는 방법에 대해 알아야한다. ! 다음 포스트에서는 비동기 코드를 다루는 방법 중 하나인 callback 함수를 사용한 방법에 대해 포스트 할 것이다 ! 

 

오늘도 공부 끝 !