16. 비동기 호출과 타이머 API

prerequisite: callback function 2020/08/14 - [LearningJavaScript] - 15. 고차함수

비동기 호출

 

function B() {
  console.log('called at the back!');
}

function A(callback) {
  callback(); 
}

A(B); // callback === B

위의 예시에선, 다른 함수(function A)의 전달인자(argument)로 넘겨지는 함수(function B)가 콜백 함수다. callback 함수(B)를 인자로 넘겨받는 함수(A)는 callback 함수인 B를 필요에 따라 즉시 실행(synchronously), 동기적으로 실행을 하고 있다.

하지만, 필요에 따라 콜백 함수 B를 나중에 비동기적으로 (asynchronously) 실행할 수도 있다.

 

 

 

1. callback in action: iterator (배열의 길이만큼 반복 실행하는 함수)

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

 

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

document.querySelector('#btn').addEventListener('click', function(e) {
  console.log('button clicked');
});

 

**콜백함수 이용과 관련해서 헷갈리지 말아야할 것은 실행한 함수의 결과값이 아닌, 함수 자체를 연결한다는 점이다.

function handleClick() {
  console.log('button clicked'); // return값이 없는 handleClick은 undefined가 된다!
}


document.querySelector('#btn').onclick = handleClick; //handleClick()으로 실행이 아닌 함수자체

document.querySelector('#btn').onclick = function() { //익명함수 안에서 handleClick()을 실행
  handleClick();
}

document.querySelector('#btn').onclick = handleClick.bind(); //bind라는 함수 메소드를 사용했다

 

 

 

 

blocking vs. non-blocking

 

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

 

커피 주문 예)

커피 주문은 동기적으로 작동한다면

1. 손님 1이 아메리카를 주문한다

2. 접수받은 직원이 아메리카노를 내린다

3. 직원이 손님 1에게 아메리카노를 전달한다

4. 손님2가 카페라떼를 주문한다

5. 접수를 받은 직원이 카페라떼를 만든다

6. 직원이 손님2에게 카페라떼를 전달한다

**문제점: 시간이 오래 걸릴듯. 손님2는 손님1이 아메리카노를 받을 때까지 주문도 못한체로 대기열에 머물러 있어야한다.

 

비동기적으로 작동한다면?

콜1. 손님1이 아메리카노를 주문한다.

    1. 접수 받은 직원이 아메리카노를 내린다

    콜백2. 아메리카노가 완성되면(이벤트) 직원이 손님1을 부른다

    3. 아메리카노를 손님1에게 전달

콜2. 손님2가 카페라떼를 주문한다.

    1. 접수를 받은 직원이 카페라떼를 만든다

   콜백 2. 카페라떼가 완성되면(이벤트) 직원이 손님2를 부른다

    3. 카페라떼를 손님2에게 전달

**비동기는 이런식으로 요청에 대한 결과가 이벤트에 의해서 이벤트 핸들러가 실행된다?

 

비동기의 주요 사례

DOM Element의 이벤트 핸들러

  - 마우스, 키보드 입력

  - 페이지 로딩

타이머

  - 타이머 API

  - 애니메이션 API (직접 찾아보기)

서버에 자원 요청 및 응답

  - fetch API

  - AJAX (XHR) (직접 찾아보기)

 

 

 

 

타이머 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도 있음

 

 

 

아래에서 콘솔이 찍히는 순서를 통해 실행 순서를 살펴보자.

1과 3이 먼저 찍히고, setTimeout안에 있는 함수가 1초 뒤에 실행되어 2가 찍힌 상태

 

아래의 경우엔, 1과 4가 먼저 찍히고 그 후에 setTimer가 작동하여 각각 타이머에 맞춰 3이 먼저 찍히고 그 뒤에 2가 찍힌다.