비동기식인지 아닌지?

자바스크립트가 단일 스레드 및 동기식 언어라는 것을 알고 있는데 어떻게 자바스크립트에서 비동기식 호출을 할 수 있습니까?

세부 사항에 들어가기 전에 몇 가지 정의를 명확히 하겠습니다.

단일 스레드: 한 번에 하나의 명령.

동기: 한 번에 하나씩 순서대로.

비동기는 한 번에 둘 이상을 의미합니다. 자바스크립트가 아니라 GO와 같은 다른 프로그래밍 언어에서 고루틴을 사용하면 다른 함수를 실행하는 함수와 이 모두가 동시에 실행되는 다른 함수를 실행할 수 있지만 자바스크립트는 동기식이며 "한 줄에서 시간 순서대로".

자바스크립트에는 특정 이벤트 직후에 실행될 콜백 함수를 정의할 수 있는 클릭 이벤트 또는 가져오기 API가 있습니다.

자바스크립트는 동기식이고 단일 스레드이지만 브라우저는 그렇지 않습니다. 브라우저는 단순한 자바스크립트 인터프리터가 아닙니다. 렌더링 엔진, 네트워킹 구성 요소 등이 있습니다. Javascript 엔진 자체는 동기식이지만 예를 들어 해당 이벤트를 발생시키는 조건이 충족되는 경우 브라우저의 다른 부분이 찾고 있는 버튼에 이벤트 리스너를 추가할 때입니다.

이 예를 살펴보겠습니다.

function waitThreeSeconds() {
  var ms = 3000 + new Date().getTime();
  while(new Date() < ms) {}
  //1st
  console.log('I am side effect of this function');
}
function clickHandler() {
  //3rd
  console.log('click event!');
}

document.addEventListener('click', clickHandler);

waitThreeSeconds();

//2nd
console.log('interpreter read all the code');

이 예에서 우리는 자바스크립트 인터프리터가 한 번에 한 줄씩 코드를 읽는다는 것을 이해할 수 있습니다. 브라우저가 'I am side effect of this function'을 먼저 기록하는 이유는 단순히 waitThreeSeconds 함수가 console.log('interpreter read all the code'); 전에 실행되었기 때문입니다. console.log('interpreter read all the code'); 이후에 waitThreeSeconds를 실행하면 브라우저 콘솔에서 '인터프리터가 모든 코드를 읽음'을 즉시 볼 수 있습니다.

그런데 여기서 한 가지, 언제 화면을 클릭해도 '클릭 이벤트!' 브라우저는 실행 스택이 비어 있는 후에만 이벤트 큐를 확인하기 때문에 항상 최종 로그가 됩니다.