[TIL] 비동기, 동기 차이, 타이머 API

커피주문으로 알아보는 동기적인 로직

1. 손님 1이 아메리카노주문한다
2. 접수를 받은 직원이 아메리카노를 만든다
3. 직원이 손님 1에게 아메리카노를 준다
4. 손님 2가 카페라떼를 주문한다
5. 접수를 받은 직원이 카페라떼를 만든다.
6. 직원이 손님 2에게 카페라뗴를 준다.

---

손님2는 손님1의 주문이 끝나고 커피를 받을 때까지
기다려야함.

요청에 대한 결과가 동시에 일어난다.
-> 요청하고 커피를 받게되니까.

비동기적 로직

1. 손님 1이 아메리카노를 주문한다
   1. 접수를 받은 직원이 아메리카노 만든다.
   2. 아메라카노 완성되면(이벤트) 직원이 손님 1을 부른다 (call back)
   3. 아메리카노를 손님 1에게 전달한다.
2. 손님 2가 카페라떼를 주문한다
   1. 접수를 받은 직원이 카페라떼를 만든다.
   2. 카페라떼가 완성되면(이벤트) 직원이 손님 2를 부른다. (call back)
   3. 카페라떼를 손님 2에게 전달한다,

---

요청에 대한 결과가 동시에 일어나지 않는다.

고로 비동기의 주요사례로는

1. DOM Element의 이벤트 핸들러

- 마우스, 키보드 입력(click, keydown 등)
- 페이지 로딩 (DOMContentLoaded 등)

2. 타이머

- 타이머 API (setTimeoute등)
- 애니메이션 API (requestAnimationFrame)

3. 서버에 자원 요청 및 응답

- fetch API
- AJAX (XHR)

---

비동기는 항상 이벤트 핸들러 (버튼 클릭)과 같다고 보면 된다.

타이머 API

setTimeout(callback, millisecond)

-> 일정 시간 후에 함수를 실행

1. arguments: 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간 (밀리초)
2. return value: 임의의 타이머 ID

---

setInterval(callback, millisecond)

-> 일정 시간의 간격을 가지고 함수를 반복적으로 실행

1. arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)
2. return value: 임의의 타이머 ID

---

clearInterval(timerId)

->반복 실행중인 타이머를 종료

1. arguments: 타이머 ID
2. return value: 없음

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

• setTimeout에 대응하는 clearTimeout도 있음