[Asynchronous]비동기

비동기적 실행(Asynchronous execution)

blocking(하나의 작업 끝날 때 까지 주문조차 못하는 것)이 되지 않고 언제든 주문할 수 있다.

작업이 끝나면 바로 제공받는다.

누군가의 작업완료 시점과 다른 누군가의 주문시작 시점이 같을 필요가 없다.

비동기 호출(Asynchronous call)

callback 함수 종류

1. 반복 실행하는 함수(iterator)

2. 이벤트에 따른 함수(event hendlerr)

document.querySelector("#btn").onclick = handleClick();

위 함수는 onclick함수를 실행하면서 handleClick()함수의 실행을 연결했다. eventhandler를 연결시킬 때는 함수 그 자체를 연결해야한다.

document.querySelector("#btn").onclick = handleClick;

비동기 호출은 callback 형태로 자주 쓰인다.

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: "아메리카노",
  },
];

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

호출의 순서를 잘 파악하도록 하자

비동기 함수 전달 패턴

1. callback

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

2. 이벤트 등록

   orderCoffeeAsync(customer.request).onready = function (coffee) {
     drink(customer.name, coffee);
   };
   

비동기 주요 사례

1. DOM Element 이벤트 핸들러

   • 키보드, 마우스 입력
   • 페이지 로딩

2. 타이머

   • 타이머 API(setTimeout 등)
   • 애니메이션 API

3. 서버자원 요청, 응답

   • fetch API
   • AJAX