JavaScript

동기 호출과 비동기 호출

Mia_ 2022. 11. 22. 16:50

비동기 호출 (Asynchronous call)

 

1. Before 비동기 호출

1.1 callback review

 - 다른 함수(A)의 인수(argument)로 넘겨주는 함수(B)
 - parameter를 넘겨 받는 함수(A)는 callback 함수(B)를 필용 따라 즉시 실행(synchronously) 할 수 도 있고, 아니면 나중에 (asynchronously) 실행 할 수도 있다

 

1.2 callback in action

- 반복 실행하는 함수(iterator)

: 배열의 길이만큼 반복 실행 된다

- 이벤트에 따른 함수(event handler)

+ 함수 실행을 연결하는 것이 아님! 함수 자체를 연결!


2. 동기 함수와 비동기 함수 

2.1 blocking과 non-blocking 

동기 blocking 비동기 non-blocking
요청에 대한 결과가 동시에 일어남 (synchronous) 요청한 결과가 동시에 일어나지 않음 (asynchronous)
전화에 비유 : 하던 일을 멈추고 받아야 함 문자에 비유 : 확인 후 나중에 답장할 수 있음

 

- 동기 함수의 예제

 

- 비동기 함수 예제

 

 

2.2 비동기 함수 전달 패턴

 

callback 패턴 

이벤트 등록 패턴


3. 비동기의 주료 사례

 

◎ DOM Element의 이벤트 핸들러

 - 마우스, 키보드 입력 (click, keydown 등)

 - 페이지 로딩 (DOMContentLoaded 등)

 타이머

 - 타이머 API(setTime 등)

 - 애니메이션 API (requestAnimationFrame)

 서버에 자원 요청 및 응답

 - fetch API

 - AJAX (XHR)

 

+ API