비동기 호출

bolcking vs non-blocking

bolcking : 요청에 대한 결과가 동시에 일어난다 (하던 일을 멈추고 한다)

non-blocking : 요청에 대한 결과가 동시에 일어나지 않는다 (확인 후 나중에 실행 한다)

(동기) 커피 주문시 동기적으로 작동한다면

1. 손님 1이 아메리카노를 주문한다
2. 접수를 받은 직원이 아메리카노를 내린다
3. 직원이 손님 1에게 아메리카노를 전달한다
4. 손님 2가 카페라떼를 주문한다 (이때 손님 2는 손님 1이 커피를 받기 전까지 주문을 못함)
5. 접수 받은 직원이 카페라떼를 만든다
6. 직원이 손님 2에게 카페라떼를 전달한다

<동기 함수>
 function waitSync(ms){
    let start = Date.now()
    let now = start
    while(now - start < ms){
    now = Date.now()
  }
} //현재 시각과 시작 시각을 비교하며 ms 범위 내에서 무한 루프를 도는 blocking 함수 입니다

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

function orderCoffeeSync(coffee) {
    console.log(coffee + '가 접수되었습니다')
    waitSync(2000)
    return coffee
}

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

customers.forEach(function(customer){
    let coffee = orderCoffeeSync(customer.request)
    drink(customer.name, coffee)
})

카페라떼가 접수되었습니다 개별적으로 처리함
2초후
Steve는 카페라떼를 마십니다, 아메리카노가 접수되었습니다
2초후
John는 아메리카노를 마십니다

(비동기) 커피 주문시 비동기적으로 작동한다면

1.손님 1이 아메리카노를 주문한다 //요청에 blocking이 없다
1-1. 접수받은 직원이 아메리카노를 내린다
1-2. 아메리카노가 완성되면(이벤트) 직원이 손님 1을 부른다 //callback
1-3. 아메리카노를 손님 1에게 전달한다

2. 손님 2가 카페라떼를 주문한다 //요청에 blocking이 없다
   2-1. 접수받은 직원이 카페라떼를 만든다
   2-2. 카페라떼가 완성되면(이벤트) 직원이 손님 2를 부른다 //callback
   2-3. 카페라떼를 손님2에게 전달한다

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

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

function orderCoffeeSync(coffee) {
    console.log(coffee + '가 접수되었습니다')
    waitSync(2000)
    return coffee
}

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

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

customers.forEach(function(customer){
    orderCoffeeAsync(customer.request, function(coffee){
    drink(customer.name, coffee)
    })
})

카페라떼가 접수되었습니다, 아메리카노가 접수되었습니다  (동시에 접수함)
2초후
Steve는 카페라떼를 마십니다, John는 아메리카노를 마십니다

비동기 함수 전달 패턴 1: callback 패턴

let request = 'caffelatte'
orderCoffeeAsync(request, function(response){
	drink(response)
})

비동기 함수 전달 패턴 2: 이벤트 등록 패턴

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

비동기의 주요 사례

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