자바스크립트 이벤트 루프

자바스크립트 이벤트 루프란 무엇인가요?

JavaScript에서 이벤트 루프는 비차단 I/O를 사용하여 코드, 이벤트 또는 메시지의 실행을 제어하는 ​​메커니즘입니다. 이는 JavaScript에서 비차단 또는 비동기 작업을 위한 방법을 제공합니다.

주요 개념

1.단일 스레드
JavaScript는 단일 스레드이므로 한 번에 하나의 작업을 실행합니다. 따라서 단일 스레드이므로 JavaScript가 실행되는 하나의 스레드가 소위 "메인 스레드입니다.

2.콜스택
이는 JavaScript가 함수 호출을 추적하는 데이터 구조입니다. 함수 호출이 스택에 푸시됩니다. 반환되면 제거됩니다. 비어 있으면 JavaScript는 다음 작업을 처리할 준비가 됩니다. 흔히 "메인 스레드"라고도 합니다.

3.힙
JavaScript가 객체와 변수를 저장하는 곳입니다. 동적 메모리 할당에 사용됩니다.

4.이벤트 대기열
실행을 기다리는 메시지 또는 작업의 대기열입니다. 작업이 대기열에 추가되면 실행을 위해 호출 스택이 비워질 때까지 기다립니다.

5.이벤트 루프
콜스택과 이벤트큐를 지속적으로 모니터링하는 것입니다. 호출 스택이 비어 있으면 이벤트 큐의 작업을 호출 스택으로 이동하여 실행합니다.

프로세스

• 코드 실행: JavaScript가 코드 실행을 시작하면 함수 호출을 호출 스택에 푸시합니다. 또한 한 기능을 차례로 실행합니다.
• 비동기 작업: 작업은 setTimeout 또는 네트워크 요청과 같이 즉시 비동기식이며 JavaScript는 실행을 차단하지 않습니다. 대신 해당 작업을 웹 API(예: 브라우저의 타이머 또는 HTTP 요청을 처리하는 서비스)로 전달합니다.

• 콜백 함수: 비동기 작업이 완료되면 해당 콜백 함수가 이벤트 대기열로 푸시됩니다.

• 이벤트 루프 검사: 이제 이벤트 루프가 호출 스택과 이벤트 큐를 순서대로 검사합니다. 호출 스택이 비어 있으면 이벤트 큐에서 첫 번째 작업을 선택하고 이를 호출 스택에 푸시하여 실행합니다.
  

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 1000);

setTimeout(() => {
  console.log('Timeout 2');
}, 500);

console.log('End');

다음 작업이 단계별로 진행됩니다.

• 시작은 동기 작업이므로 즉시 기록됩니다.
• 첫 번째 setTimeout은 1000ms 지연으로 등록된 후 Web API로 이동합니다. 콜백은 1000ms 후에 이벤트 대기열에 추가됩니다.
• 두 번째 setTimeout은 500ms 지연으로 등록된 후 Web API로 이동합니다. 콜백은 500ms 후에 이벤트 대기열에 추가됩니다.
• 동기식이라 종료가 바로 로그됩니다.
• 500ms 후에 두 번째 setTimeout에 대한 콜백이 이벤트 큐에서 호출 스택으로 이동하고 Timeout 2를 기록합니다.
• setTimeout의 첫 번째 속도는 1000ms 내에 이벤트 큐에서 호출 스택까지 진행되고 Timeout 1을 기록합니다.

요약

• Call Stack : 함수를 순서대로 실행합니다.
• 이벤트 큐: 실행할 메시지나 작업을 저장합니다.
• 이벤트 루프: 비어 있을 때 이벤트 큐에서 호출 스택으로 전달되는 작업을 실행합니다.

위 내용은 자바스크립트 이벤트 루프의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!