비동기 호출

다른 함수의 전달인자로 넘겨주는 함수를 callvackㅎ마수라고 한다.
parameter를 넘겨받는 함수는 callback 함수를 필요에 따라 즉시 실행할수도 있고 나중에 실행할 수도 있다.

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

blocking(전화)	non-blocking(문자)
요청에 대한 결과가 동시에 일어난다.	확인 후, 나중에 답장할 수 있다.
하던 일을 멈추고 받아야 한다.(synchronous)	요청에 대한 결과가 동시에 일어나지 않는다.(asynchronous)

비동기의 주요 사례

• DOM Element의 이벤트 핸들러
  - 마우스, 키보드 입력(click, keydown 등)
  • 페이지 로딩 (DOMContentLoaded 등)
• 타이머
  - 타이머 API (setTimeout 등)
  • 애니메이션 API (requestAnimationFrame)
• 서버에 자원 요청 및 응답
  - fetch API
  • AJAX(XHR)

[참고 사이트]

• Event Loop
  https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop

• Philip Roberts
  https://vimeo.com/96425312

타이머 API

1. setTimeout(callback, millisecond)

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

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

2. setInterval(callback, millisecond)

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

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

3. clearInterval(timerId)

• 반복 실행중인 타이머를 종료
• arguments: 타이머 ID
• return value: 없음

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