Callback
다른 함수의 argument(전달인자)로 넘겨주는 함수를 콜백 함수라고 합니다. 이 때 parameter(매개 변수)를 넘겨 받는 함수는 콜백 함수를 필요에 따라 즉시(synchronous, 동기) 실행할 수도 있고, 나중에(asynchronous, 비동기) 실행할 수도 있습니다.
Blocking vs. Non-blocking
요청에 대한 결과가 동시에 일어나는 경우를 동기화, 요청에 대한 결과가 동시에 일어나지 않는 경우를 비동기화라고 합니다. 즉, 어떤 요청이 있을 경우 하던 일을 멈추고(blocking) 대응하는 경우를 동기화라고 할 수 있고, 일단 확인한 후에 나중에 대응하는 경우는 비동기화라고 할 수 있습니다.
비동기화의 주요 사례
- DOM Element의 Event Handler
- 마우스, 키보드 입력(click, keydown 등)
- 페이지 로딩(DOMContentLoaded 등)
- Timer
- 타이머 API(setTimeout 등)
- 애니메이션 API(requestAnimationFrame)
- 서버에 자원 요청 및 응답
- fetch API
- AJAX(XHR)
비동기화의 대표적인 사례인 타이머 API의 경우를 살펴보면 다음과 같습니다.
setInterval(callback, milliseconds);
clearInterval(timerId);
ex) const timer = setInterval(function() {
console.log('0.5초마다 실행');
}, 500);
// setInterval함수의 return value는 임의의 타이머 ID
clearInterval(timer);코드 및 자료 출처: 코드스테이츠(CodeStates)
