JavaScript의 이벤트 루프 이해 — 간단해졌습니다!

JavaScript는 웹사이트의 90%를 차지하고 있는 가장 인기 있는 프로그래밍 언어 중 하나입니다. 그러나 가장 까다롭고 가장 오해받는 개념 중 하나는 이벤트 루프의 작동 방식입니다. 이벤트 루프, 태스크 큐, 콜 스택, 마이크로 태스크 큐, 웹 API에 대해 쉽게 설명합니다.

JavaScript를 특별하게 만드는 것은 무엇입니까?

JavaScript는 단일 스레드 언어입니다. 이는 동시에 여러 작업을 처리할 수 있는 C나 Go와 같은 언어와 달리 한 번에 하나씩 처리한다는 의미입니다. 데이터 가져오기나 타이머 실행과 같은 비동기 작업을 원활하게 수행하기 위해 JavaScript는 이벤트 루프!

라는 것을 사용합니다.

1. 웹 API란 무엇입니까?

웹 API는 네트워크 요청 만들기(가져오기 사용), 타이머 설정(setTimeout) 또는 사용자 위치 액세스( 사용)와 같은 작업을 처리하기 위해 브라우저 또는 Node.js에서 제공하는 추가 도구입니다. 위치정보 API). 이러한 작업은 기본 JavaScript 스레드 외부에서 실행됩니다.

예:

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

여기서 기본 JavaScript가 다른 코드를 계속 실행하는 동안 브라우저는 타이머를 처리합니다.

2. 작업 대기열이란 무엇입니까?

작업 대기열은 JavaScript가 실행할 준비가 될 때까지 웹 API, 이벤트 리스너 및 기타 지연된 작업의 콜백 함수를 기다리는 곳입니다. 이러한 작업은 차례를 기다리고 있습니다.

매장에서 기다리는 줄처럼 생각하면 JavaScript가 현재 작업이 완료되면 각 작업이 이벤트 루프에 의해 처리됩니다.

3. 콜스택이란 무엇입니까?

콜 스택은 JavaScript가 함수 호출을 추적하는 곳입니다. 함수를 호출하면 스택에 푸시됩니다. 끝나면 튀어 나옵니다. JavaScript는 스택에 나타나는 순서대로 작업을 처리하며 본질적으로 동기식입니다.

4. 이벤트 루프란 무엇입니까?

이벤트 루프는 모든 것을 계속 움직이는 교통 경찰관과 같습니다. 콜 스택이 비어 있는지 지속적으로 확인하고 비어 있으면 태스크 큐 또는 마이크로 태스크 큐의 태스크를 스택으로 이동하여 실행합니다. 이것이 메인 스레드를 차단

하지 않고도 JavaScript가 비동기 코드를 처리할 수 있게 해주는 것입니다.

실행 중인 이벤트 루프의 예

setTimeout(() => {
  console.log("2000ms");
}, 2000);

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

여기서 무슨 일이 일어나는 걸까요?

분석해 보겠습니다.

1. "End"는 동기식이며 호출 스택에서 실행되므로 즉시 기록됩니다.
2. 100ms의 setTimeout은 Web API에 의해 처리됩니다. 100ms 후에 콜백은 작업 대기열으로 이동합니다.
3. 2000ms의 setTimeout도 동일하지만 해당 콜백은 2000ms 후에 작업 대기열으로 이동합니다.
4. 이벤트 루프는 100ms 콜백을 콜 스택으로 먼저 이동한 다음 2000ms 콜백을 이동합니다.

5. 마이크로태스크 대기열이란 무엇입니까?

마이크로태스크 대기열은 작업 대기열 이전에 처리되는 작업을 위한 특수 대기열입니다. 마이크로태스크는 Promise 또는 돌연변이 관찰자와 같은 것에서 비롯됩니다. 이벤트 루프는 항상 작업 대기열 이전의 마이크로 작업 대기열을 확인합니다.

약속이 있는 마이크로태스크 예시

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

여기서 무슨 일이 일어나는 걸까요?

1. "시작"이 즉시 기록됩니다.
2. setTimeout 콜백은 작업 대기열에 배치됩니다.
3. Promise 해결은 마이크로태스크 대기열에 배치됩니다.
4. "종료"가 기록됩니다.
5. 이벤트 루프는 마이크로태스크 대기열을 확인하고 Promise 콜백을 실행합니다.
6. 마지막으로 작업 대기열은 setTimeout 콜백을 처리합니다.

출력:

Start
End
Promise
Timeout

시각적 표현

모든 것을 마무리

모든 것이 조화를 이루는 방법은 다음과 같습니다.

1. 웹 API는 메인 스레드 외부의 타이머와 같은 비동기 작업을 처리합니다.
2. 이벤트 루프는 작업을 태스크 큐 또는 마이크로태스크 큐에서 콜 스택
으로 이동합니다.
3. 마이크로 작업(약속과 유사)은 작업 대기열의 작업보다 먼저 처리됩니다.

위 내용은 JavaScript의 이벤트 루프 이해 — 간단해졌습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!