JavaScript의 promise 및 setTimeout 실행 순서 관련 문제(코드 예)

본 글의 내용은 자바스크립트의 promise와 setTimeout 실행 순서에 대한 내용입니다. 참고할만한 내용이 있으니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다.

promise는 es6에서 도입한 언어 표준이며 비동기 프로그래밍을 위한 솔루션입니다.

이 글을 읽기 위한 전제 조건은 브라우저 이벤트 루프의 메커니즘뿐만 아니라 다음과 같은 Promise의 기본 사용법과 기능을 이해하는 것입니다. 자체 실행 기능, 상태의 되돌릴 수 없는 특성 등

질문을 던집니다

다음 코드와 질문을 살펴보겠습니다

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

promise.then과 setTimeout이 모두 비동기이므로 promise.then 이벤트는 다음과 같아야 합니다. 이벤트 루프 대기열의 setTimeout 뒤에 대기하고 있는데 왜 promise.then이 setTimeout 전에 인쇄되었습니까?

중요 개념

이벤트 루프의 개념

• Javascript는 단일 스레드이며 모든 동기화 작업은 메인 스레드에서 실행됩니다.

• 메인 스레드의 모든 작업이 실행되면 시스템은 작업 대기열의 이벤트를 "순차적으로" 읽습니다. 해당 비동기 작업이 기본 스레드에 들어가 실행을 시작합니다.

• 비동기 작업 간에는 차이가 있으므로 실행 우선순위도 다릅니다. 이는 크게 마이크로 작업(Promise, MutaionObserver 등의 마이크로 작업)과 매크로 작업(setTimeout, setInterval, I/O 등의 매크로 작업)으로 나뉩니다.

• Promise 실행기의 코드는 동기적으로 호출되지만 콜백은 마이크로태스크를 기반으로 합니다.

• 매크로 작업은 마이크로 작업보다 우선순위가 높습니다.

• 모든 매크로 작업은 현재 마이크로 작업 대기열을 지워야 합니다.

• 첫 번째 스크립트 태그의 코드는 첫 번째 매크로 작업입니다

• 메인 스레드 모든 작업이 완료될 때까지 위 단계를 계속 반복합니다.

내 이해

코드의 실행 과정을 살펴보겠습니다.

모든 코드는 스크립트 태그로 작성되므로 모든 코드를 읽는 것이 첫 번째 매크로 작업을 실행하기 시작합니다.

두 번째 매크로 작업인 setTimeout을 먼저 만나서 이를 매크로 작업 이벤트 큐에 넣고 먼저 대기열에 넣습니다.

다음으로 Promise 실행기의 코드가 동기적으로 호출되므로 2와 3을 순서대로 인쇄합니다.

아래로 내려와서 마이크로태스크인 promise의 콜백을 만나 마이크로태스크 이벤트 큐에 넣으세요.

다음으로 5를 인쇄한 다음 마이크로 태스크를 실행하고 4를 인쇄합니다.

첫 번째 매크로 작업이 완료되고 다음 매크로 작업을 실행하고 1을 인쇄합니다. 이 시점에서 모든 작업이 완료됩니다.

그래서 최종 결과는 2 3 5 4 1입니다.

위 내용은 JavaScript의 promise 및 setTimeout 실행 순서 관련 문제(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!