비동기 호출

callback

• 다른 함수(A)의 전달인자로 넘겨주는 함수(B)
  : 파라미터를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행 할수도 있고, 아니면 나중에 실행할 수도 있다.

• 함수 실행을 연결하는 것이 아닌, 함수 자체를 연결해야함.

• callback in action : 반복 실행하는 함수(iterator), 이벤트에 따른 함수(event handler)

blocking 과 non-blocking

• blocking : 하던일을 멈추고 해야함. 요청에 대한 결과가 동시에 일어남 (ex.전화)
• non-blocking : 확인 후 나중에 실행할 수 있음. 요청에 대한 결과가 동시에 일어나지 않음(ex.문자)

동기와 비동기

동기 : 요청을 보낸 후 해당 응답을 받아야 다음 동작을 실행 (ex.은행)
비동기 : 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행 (ex.카페)

커피 주문으로 알아보는 동기 vs 비동기

• 커피 주문이 동기적으로 작동할 때
  : 손님2은 손님1이 주문한 것을 전달받을 때까지 주문도 하지 못하고 기다리고 있어야 함.
• 커피 주문이 비동기적으로 작동할 때
  : 손님1 커피를 만들다가 손님2이 주문을 하면 주문을 받고, 손님1 커피를 마저 내리고 손님1을 불러(callback) 전달, 손님2의 커피를 내리고 손님2를 불러(callback)에게 전달 -> 응답이 비동기적으로 이뤄진다.

비동기 호출 예제

1. 클라이언트-서버 (서버에 자원 요청 및 응답 : fetch API, AJAX)
2. 이벤트 핸들링(DOM Element의 이벤트 핸들러)
3. 타이머
   • 타이머 API (브라우저 내장 기능 setTimeout(callback, ms) 등)
   • 애니메이션 API (requestAnimation)

타이머 관련 API

setTimeout(callback, millisecond)
: 일정 시간 후에 함수를 실행

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

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

setInterval(callback, millisecond)
: 일정 시간의 간격을 가지고 함수를 반복적으로 실행

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

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

clearInterval(timerId)
: 반복 실행중인 타이머를 종료

• arguments: 타이머 ID
• return value: 없음

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

• setTimeout에 대응하는 clearTimeout도 있음