이벤트 루프
자바 스크립트의 비동기 성을 이해 하려면 하나의 기본 개념을 이해해야 합니다. JS 엔진은 다음에 무엇을 실행할까요? 이것은 좀 더 공식적으로 이벤트 루프로 알려진 이 질문에 답하는 방법에 대한 매우 간단한 개요입니다.
https://dev.to/ryanameri/mastering-hard-parts-of-javascript-asynchronicity-i-1b5
JavaScript는 (대부분) 단일 스레드이므로 JavaScript의 모든 것이 동기식이면 JS 엔진은 소스 코드에 나타나는 대로 모든 문을 하나씩 실행하고 실행이 완료 될 때까지 기다린 다음 다음 줄로 이동합니다.
그러나 그것은 웹 개발과 관련하여 엄청나게 제한적입니다. 이 문제를 해결하기 위해 browser/node.js가 제공하는 일부 API는 비동기식이므로 기본적으로 JS 엔진이 처음 실행될 때 실행되지 않습니다. 대신 모든 동기 문이 완료되면 실행되도록 대기열에 넣습니다. 고려해 봅시다
function printHello() {
console.log("Hello");
}
setTimeout(printHello, 0);
console.log("Me first!");setTimeout은 0 밀리 초에 printHello를 실행하도록 지시 되기 때문에 출력이 다음과 같아야 한다고 추론 할 수 있습니다.
Hello
Me first!그러나 실제로 출력은
Me first!
Hello이는 setTimeout이 비동기 API (콜백 함수)이므로 실행이 "작업 대기열"에 배치되기 때문입니다. 작업 대기열의 모든 항목은 모든 동기 코드가 이미 실행 된 후에만 실행됩니다.
참고 : console.log는 실제로 그 자체가 비동기 함수이지만 개념을 간단하고 명확하게 보여주기 위해 세부 사항을 자세히 살펴 보겠습니다.
Promises
ES6에 도입 된 Promise는 믹스에 하나의 추가 대기열을 추가합니다.
function display(data){console.log(data)}
function printHello(){console.log("Hello");}
function blockForLong(){
const arr = [];
for (let i = 0; i < 3_000_000_000; i++>){
arr.push(i)
}
}
setTimeout(printHello, 0);
const futureData = fetch('https://twitter.com/AmeriRyan/status/1291935897076641792')
futureData.then(display)
blockForLong()
console.log("Me first!");이 코드는 fetch ()가 정확히 작동하는 방식이 아니기 때문에 올바르게 실행되지 않습니다.하지만 간단하게 하기 위해 fetch가 URL을 문자열로 사용하고 Promise를 반환하는 함수라고 가정 해 보겠습니다. blockForLong은 우리 목적에 중요한 일을 하지 않는 함수이지만 실행하는 데 오랜 시간이 걸리는 동기 함수입니다. 먼저 0 밀리 초에 printHello를 실행하는 setTimeout을 호출합니다. 그런 다음 Promise를 처리하고 콘솔에 인쇄하는 함수 디스플레이에 전달합니다. 그런 다음 blockForLong을 실행하고 마지막으로 console.log를 실행합니다. 먼저 무엇이 인쇄되는지 짐작할 수 있습니까?
먼저 모든 동기 코드가 실행됩니다. 즉, blockForLong이 먼저 호출 된 다음 Me가 먼저 호출됩니다! 콘솔에 인쇄됩니다. 약속은 콜백 함수가 배치되는 "작업 대기열"보다 우선하는 "마이크로 작업 대기열"이라는 대기열에 배치됩니다. 따라서 setTimeout이 소스 코드에서 먼저 표시 되더라도 먼저 반환 된 데이터로 표시 함수를 호출하고 마지막에 printHello 함수 만 호출합니다.
따라서 JavaScript의 이벤트 루프는 간단히 말해서 다음과 같습니다.
이 예제의 실행 순서를 따를 수 있다면 앞으로 나올 모든 연습 문제를 해결할 수 있을 것입니다 (아마 MDN의 약간의 도움을 받아).
다음 섹션에서는 비동기 성을 마스터하고 Promises를 소개하는 데 도움이 되는 10 가지 연습을 연습 할 것입니다.
등록된 댓글이 없습니다.
