[JS] 비동기 호출

callback

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

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

function A(callback){
	callback(); // callback === B
}

A(B);

이 경우 동기적인 경우이며, 비동기적으로 호출 할 수도 있음.

 

---

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

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

배열의 길이만큼 반복실행

---

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

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

 

---

 

함수 실행을 연결하는 것이 아니라, 함수 자체를 연결한 것이다.

//헷갈리지 말것

function handelClick(){
	console.log('button clicked');
}

// O - 올바른 케이스
// handleClick 을 reference 로 할당
document.querySelector('#btn').onclick = handleClick;

//익명함수를 할당하여 함수를 실행하고 있음.
document.querySelector('#btn').onclick = function(){
	handleClick();
}

//bind()는 함수 그 자체를 return.
document.querySelector('#btn').onclick = handleClick.bind();



//XXX - 옳지 않은 케이스
document.querySelector('#btn').onclick = handleClick();
//함수 실행을 연결하는 것이 아니라, 함수 자체를 연결해야 한다!!!
// 이 결과는 undefined 가 할당됨.

 

---

 

blocking vs non-blocking

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

 

---

- 커피주문으로 알아보는 동기 vs 비동기

동기 : 요청에 대한 결과가 동시에 일어남

만일 커피 주문이 동기적으로 작동한다면 ? 

1. 손님 1이 아메리카노를 주문한다. 2. 접수를 받은 직원이 아메리카노를 내린다. 3. 직원이 손님 1에게 아메리카노를 전달한다. 4. 손님 2가 카페라떼를 주문한다. - 손님 2는 손님 1이 아메리카노를 전달받을 때 까지 주문을 하지 못하고 대기열에 머물러있음 5. 접수를 받은 직원이 카페라떼를 만든다. 6. 직원이 손님2에게 카페라떼를 전달한다.

 

---

 

비동기 : 요청에 대한 결과가 동시에 일어나지 않는다.

1. 손님 1이 아메리카노를 주문한다.     1. 접수를 받은 직원이 아메리카노를 내린다.     2. 아메리카노가 완성되면 직원이 손님 1을 부른다. ->이벤트가 일어나면 callback!     3. 아메리카노를 손님 1에게 전달한다. 2. 손님 2가 카페라떼를 주문한다.     1. 접수를 받은 직원이 카페라떼를 만든다.     2. 카페라떼가 완성되면 직원이 손님 2를 부른다. ->이벤트가 일어나면 callback!     3. 카페라떼를 손님 2에게 전달한다.  요청에 blocking이 없으며, 응답이 비동기적으로 이루어진다.

---

예시 - 동기적 함수

//동기적 함수

function waitSyn(ms){
	var start = Date.now();
    var now = start;
    while (now - start < ms) {
    	now = Date.now();
    }
}
//현재 시각과 시작 시각을 비교하며 ms범위 내에서 무한 루프를 도는 blocking 함수
// 동기적으로 delay 해줌.

function drink(person, coffee){
	console.log(person+ '는 ' + coffee + '를 마십니다.');
}

function orderCoffeeSync(coffee){
	console.log(coffee + '가 접수되었습니다.');
    waitSync(2000);
    //2초동안 blocking - 접수 후 마시고, 접수후 마시고, 
    return coffee;
}

let customers = [
	{
    	name : 'Steve',
        request : '카페라떼'
    },
    {
    	name : 'John',
        request : '아메리카노'
    }
];

//call synchronously
customers.forEach(function(customer){
	let coffee = orderCoffeeSync(customer.request);
    drink(customer.name, coffee);
    //한번 실행하는데에 2초식 소요됨
});

 

예시 2 - 비동기적 함수

function waitAsync(callback, ms){
	setTimeout(callback, ms);
    // 특정 시간 이후에 callback 함수가 실행되게끔 하는 브라우저 내장 기능!
}

function drink(person, coffee){
	console.log(person + '는 ' + coffee +'를 마십니다.');
}

let customers = [
	{
    	name : 'Steve',
        request : '카페라떼'
    },
    {
    	name : 'John',
        request : '아메리카노'
    }
];

function orderCoffeeAsync(menu, callback){
	console.log(menu +'가 접수되었습니다.');
    waitAsync(funciton(){
    	callback(menu);
    },2000);
}

//call asynchronously
Customers.forEach(function(customer){
	orderCoffeeAsync(customer.request, function(coffee){
    	drink(customer.name, coffee);
    });
});

//접수를 바로바로 하고 callback도 한번에!

---

비동기 함수 전달 패턴

1. callback패턴

let requset = 'caffelatte';
orderCoffeeAsync(request, function(response){
	//response -->주문한 커피 결과
    drink(response);
});

2. 이벤트 등록 패턴

let request = 'caffelatte';
orderCoffeeAsync(request).onready = function(response){
	drink(response);
};

---

비동기의 주요 사례

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

 

 

---

+ Advanced : 브라우저 비동기 함수 작동 원리를 알려면
event Loop와 Philip Roberts: Help, I'm stuck in an event-loop 읽어보기