JavaScript가 잠들지 않는 이유: 이벤트 루프에 대한 쉬운 가이드

단일 스레드 언어로서의 JavaScript: JavaScript가 한 번에 하나의 작업만 처리하지만 이벤트 루프를 사용하면 다르게 보이는 방법을 간략하게 설명합니다.

. 이벤트 루프 작동 방식: 이벤트 루프 프로세스의 주요 단계

• 스택: 호출 스택은 동기 코드를 관리합니다.

• 큐: 콜백 큐에는 실행 대기 중인 작업이 들어 있습니다.

• 루프: 이벤트 루프는
  전에 스택이 비어 있는지 확인합니다. 작업을 대기열에서 스택으로 이동합니다.

워크플로우 분석:

초기 코드 실행:

console.log('Hi');
$.get('url', function cb(data) {
  console.log(data);
});
console.log('JSConfEU');

• 이 코드가 실행되기 시작하면 console.log('Hi')가 콜 스택에 추가되고 "Hi"가 콘솔에 인쇄됩니다.

비동기 함수 호출($.get):

• 다음으로 $.get('url', function cb(data) { ... }) 이 발생합니다. 이 함수는 'url'에서 데이터를 검색하기 위해 HTTP 요청을 시작합니다.

• 메인 스레드를 차단하는 대신 요청이 Web API 환경(종종 브라우저의 일부)으로 전송됩니다.

• 콜백 함수(cb)는 HTTP 요청이 완료되면 실행되도록 등록되어 있지만 바로 실행되지는 않습니다. HTTP 요청은 네트워크 요청을 처리하는 데 일반적으로 사용되는 XHR(XMLHttpRequest)로 표시된 웹 API 섹션에 계속 로드됩니다.

다음 동기 라인으로 이동:

• javaScript는 호출 스택에 추가되는 다음 줄인 console.log('JSConfEU')로 이동합니다. 그러면 "JSConfEU"가 콘솔에 인쇄됩니다.

이벤트 루프 및 작업 대기열:

• 모든 동기 코드가 끝나면 호출 스택이 비어지고 JavaScript는 모든 비동기 작업이 완료될 때까지 기다립니다.

• HTTP 요청이 완료되면 콜백 함수(cb)가 Web API에서 작업 대기열로 이동됩니다.

• 이벤트 루프는 콜 스택이 비어 있는지 지속적으로 확인하고 비어 있으면 태스크 큐에서 콜 스택으로 작업을 이동합니다

콜백 실행:

• 이벤트 루프가 콜스택에 콜백 함수를 배치하면 console.log(data)가 실행됩니다. 콜백 함수 내에서 HTTP 요청으로부터 받은 데이터를 콘솔에 인쇄합니다.

요약 :

이 흐름은 이벤트 루프가 비동기 코드를 처리하는 방법을 보여줍니다.
작성자:

• 콜 스택에서 동기 코드를 즉시 처리합니다.

• 웹 API에서 비동기 작업을 처리하고 완료되면 작업 대기열로 이동합니다.

• 이벤트 루프가 비어 있는 경우에만 호출 스택으로 작업을 이동하도록 허용하여 비차단 코드 실행을 보장합니다.

위 내용은 JavaScript가 잠들지 않는 이유: 이벤트 루프에 대한 쉬운 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!