[TIL]비동기 호출

동기 vs 비동기

동기: 요청을 보낸 후 해당응답을 받아야지 다음 동작을 실행합니다.
비동기: 요청을 보낸 후 응답에 관계 없이 다음 동작을 실행합니다.

비동기 처리란

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 순차적으로 다음 코드를 먼저 실행하는 자바스크립트의 특성.
클라이언트에서 서버로 데이터를 요청 했을 때, 서버가 그 요청에 대한 응답을 언제 줄지도 모르는데 마냥 기다릴 수 없어 비동기처리가 필요합니다.

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

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

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

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

타이머API

• setTimeout(callback, millisecond) 일정 시간 후에 함수를 실행
  -arguments: 실행할 callback함수, callback함수 실행 전 기다려야 할 시간(밀리초)
  -return value: 임의의 타이머ID

  ```js

  setTimeout(function() {
  console.log('1초 후 실행');
  }, 1000);

- seInterval(callback, millisecond) 일정 시간의 간격을 가지고 함수를 반복적으로 실행
	-arguments: 실행할 callback함수, 반복적으로 함수를 실행시키기 위한 시간 간격(밀리초)
    -return value: 임의의 타이머ID
    ```js
setTimeout(function() {
  console.log('1마다 실행');
}, 1000);

• clearInterval(timerId) 반복 실행중인 타이머를 종료
  -arguments: 타이머ID
  -return value: 없음

  ```js

  var timer = setInterval(function() {
  console.log('1초마다 실행');
  }, 1000);
  clearInterval(timer);