비동기 호출

비동기 호출 (Asynchronous call)

• 클라이언트 서버

• 이벤트 핸들링

• 애니메이션

 

Parameter를 넘겨받는 함수(A)는 callback 함수(B)를 필요에 따라 즉시 실행(synchronus)

나중에 실행(asynchronously) 할 수도 있음

function B() {
  console.log ('call back');
}
function A(callback) {
  callback();				// callback === B
}

A(B);

 

callback in action : 반복 실행하는 함수 (iterator)

[1, 2, 3].map(function(ele, index) {
  return ele * ele;
});

 

callback in action : 이벤트에 따른 함수 (event handler)

document.querySelector('.button').addEventListener('click', function(event) {
  console.log('button click');
});

 

동기 vs 비동기 구분

•  동기: 전화 = 하던 일을 멈추고 받아야 함

• 비동기 : 문자 = 확인 후, 나중에 답장할 수 있음

 

비동기 사례

 

DOM Element의 이벤트 핸들러

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

 

타이머

• 타이머 API (setTimeout 등)
• 애니메이션 API (requestAnimationFrame)

 

서버에 자원 요청 및 응답

• fetch API
• A.JAX (XHR)