이벤트 루프 - 자바스크립트

이벤트 루프는 자바스크립트 코드의 실행 순서(메인 스레드를 차단하지 않고 비동기 작업 처리)를 유지하는 루프입니다.

이벤트 루프에 들어가기 전에 알아야 할 사항:

1. 콜 스택: JavaScript가 코드를 실행하는 곳입니다. 후입선출(LIFO) 구조를 따릅니다. 함수가 호출되면 새로운 실행 컨텍스트가 생성되고 스택에 푸시됩니다. 기능이 종료되면 팝업이 뜹니다.
2. MicroTasks 대기열: queueMicroTask 메소드, Promise 핸들러, 대기 전용 특수 대기열 콜백 및 MutationObserver(인터페이스는 DOM 트리에 대한 변경 사항을 감시하는 기능을 제공합니다).
3. MacroTasks 대기열: 웹 API의 기타 모든 콜백(setTimeout, setInterval, DOM API, fetch)는 매크로태스크 대기열에 들어갑니다.

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

작업을 기다리고 실행을 위해 호출 스택에 푸시하는 무한 루프입니다. JavaScript는 단일 스레드이므로 우선 순위에 따라 두 동기 비동기 작업을 모두 처리하는 실행 순서를 유지합니다.

1. 일반 JS 코드: 동기 코드가 먼저 실행되어 호출 스택을 채웁니다.
2. MicroTasks: microTasks 대기열에 대기 중인 작업이 실행됩니다.
3. MacroTasks: MacroTasks 대기열에 대기 중인 작업이 실행됩니다.

워크플로를 더 잘 이해하기 위해 예를 살펴보겠습니다

2개의 대기열 microTasks 및 macroTasks가 있다고 가정해 보겠습니다. 코드가 실행되기 시작하면

1. () => console.log(1)은 2000ms 안에 macroTasks 대기열로 푸시됩니다.
2. () => { console.log(2); queueMicroTask(() => console.log(3)); }) microTasks 대기열
에 푸시됩니다.
3. () => { console.log(4); setTimeout(() =>console.log(5)); }) microTasks 대기열
에 푸시됩니다.
4. () => console.log(6)는 0ms 안에 macroTasks 대기열로 푸시됩니다.
5. console.log(7)는 콘솔에서 7을 실행하고 인쇄합니다.
6. 이제 이벤트 루프는 microTasks 대기열에서 작업을 확인하고 () => { console.log(2); queueMicroTask(() => console.log(3)); }) 작업을 수행하고 콘솔에 2를 인쇄하고 () => console.log(3)를 microTasks 대기열
에 추가합니다.
7. 다음으로 이벤트 루프는 microTasks 대기열을 확인하고 () => { console.log(4); setTimeout(() =>console.log(5)); }) 작업을 수행하고 4를 인쇄하고 () => console.log(5)를 macroTasks 대기열에 0ms 안에 넣습니다.
8. 다시 이벤트 루프는 microTasks 대기열을 확인하고 () => console.log(3)) 작업을 수행하고 콘솔에 3을 인쇄합니다.
9. microTasks 대기열이 이제 비어 있으므로 이벤트 루프는 MacroTaskQueue를 확인하고 () => console.log(6) 그리고 콘솔에 6을 인쇄합니다.
10. 이벤트 루프가 다음 작업을 수행합니다. () => macroTasks의 console.log(5) microTasks 대기열에 작업이 없는지 확인한 후 콘솔에 5를 인쇄합니다. .
11. 이벤트 루프가 다음 작업을 수행합니다. () => macroTasks의 console.log(1)를 실행하고 콘솔에 1을 인쇄합니다.

---

읽어주셔서 감사합니다! 이 블로그가 유익하고 흥미로웠기를 바랍니다. 부정확한 내용을 발견하거나 의견이 있으면 언제든지 알려주시기 바랍니다.

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