JS9(동기/비동기)

JS는 한 번에 하나의 테스크만 실행할 수 있는 싱글 스레드 방식(브라우저X. 브라우저에 내장된 자바스크립트 엔진O) 으로 동작!

 

동기

: 순서대로 작동한다.

요청을 보낸 후에 결과가 나와야지 다음 동작이 이루어진다 → 대기 필요

장점은 코드가 직관적이고 간단함

 

function delayFunc(func, delay) {
  const delayUntil = Date.now() + delay;
  while  (Date.now() < delayUntil);
  func()
}


delayFunc(foo, 5000);
zoo()

function foo() {
  console.log("foooo")
}

function zoo() {
  console.log('zoooooo')
}

setTimeout(boo, 2000)
xoo()

function boo() {
  console.log("booooo")
}

function xoo() {
  console.log("xoooo")
}

//foooo 5초뒤 
//zoooooo 
//xoooo
//booooo 2초뒤

 

비동기

: 응답 상태와 상관없이 다음 동작 수행한다.

요청을 보낸 후에 결과를 받기까지 시간이 오래 걸려도 다른 작업을 동시에 할 수 있다. → 대기가 필요없고 효율적이다.

단점은 예측이 어렵고, 직관적으로 확인이 어렵다.

 

▷AJAX (Asynchronous Javascript And XML) : 비동기 자바스크립트와 XML

페이지 전체를 리프레쉬하지 않고서도 수행되는 비동기성이 특징!

→ 비동기성을 통해 사용자의 event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있음

 

 

 

1. 함수 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성

2. 생성된 함수 실행 컨텍스트는 실행 컨텍스트 스택(콜 스택)에 푸시되고 함수 코드가 실행

3. 함수 코드의 실행이 종료하면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝되어 제거

 

이벤트 루프

: 브라우저에 내장되어 있는 기능 중 하나로 자바스크립트의 동시성을 지원.

콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수가 있는지 반복해서 확인한다.

태스크 뷰에 보관된 함수들은 비동기 처리 방식으로 동작!

 

태스크 큐

: 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역

 

참고

https://developer.mozilla.org/ko/docs/Web/Guide/AJAX/Getting_Started

https://private.tistory.com/24