마이크로태스크 대기열이란 ? 작동 방법까지 상세히 알아보자

마이크로태스크 대기열이란 ? 작동 방법까지 상세히 알아보자

 

JavaScript 사용 사례로 설명

어도비 스톡 사진

몇 주 전에 동료가 도움을 요청했습니다. 그들은 비동기 함수에 인위적인 대기 시간을 추가하려고 했습니다.

코드는 이렇게 생겼습니다.

예상되는 동작은 다음과 같습니다. task1 실행 후 5초 후 task2그리고 마지막으로 task3.

그들이 본 실제 행동은 task1 실행, 다음 task3그리고 마지막으로 task2. 내 동료는 함수가 기다리지 않는 이유를 알고 싶었습니다. setTimeout 계속하기 전에 완료합니다.

이유 task2 가 실행 중입니다 task3 Microtasks 대기열입니다.

JavaScript 엔진에는 작업을 기다리는 이벤트 루프가 있습니다. 작업이 들어오면 도착한 순서대로 실행됩니다. 이벤트 루프 내부에는 Microtask 대기열이라는 하위 대기열이 있습니다.

Microtask 대기열은 모든 Microtask가 완료될 때까지 나머지 이벤트 루프가 실행되는 것을 차단합니다. Promise는 Microtasks 대기열로 이동합니다. 이것이 애플리케이션이 다음 작업으로 이동하기 전에 Promise가 해결될 때까지 "기다립니다".

내 동료의 예에서 함수가 실행될 때 이벤트 루프에 추가된 세 가지 작업이 있습니다. Task1, setTimeout그리고 task3. setTimout 약속을 반환하지 않으므로 일반 작업 대기열에 추가됩니다.

이벤트 루프 예:

Tasks     | setTimeout
Microtasks| task1, task3

Task1이 먼저 실행되고 나서 task3이 Microtasks 대기열의 다음으로 실행될 것입니다. Microtasks 대기열이 비면 일반 작업이 실행됩니다.

그래서 setTimeout 기능은 5초 안에 완료됩니다. 한번 setTimeout 완료 task2 이벤트 루프에 추가됩니다. Task2 를 반환하기 때문에 Micortasks 대기열에 추가됩니다. Promise. 이것은 내 동료가 경험한 이유를 설명합니다. task1 그 다음에 task3 그 다음에 task2.

의도한 대기 동작을 구현하려면 setTimeout 함수를 래핑해야 합니다. Promise. Promise에 있으면 합류합니다. task1 그리고 task3 마이크로 작업 대기열에 있습니다.

지금, task3 새로운 때 실행됩니다 Promise 해결되었다.

새로운 Promise 후에 해결됩니다 task2 완료되고 해결 기능이 실행되었습니다.