에서는 setTimeout 순차 실행의 약속 | 자바 스크립트 MacroTask 큐 (매크로 작업 큐) 및 MicroTask 큐 (마이크로 태스크 큐)

이는 일이 원인, 나는 소를 날려
그림 삽입 설명 여기
과 동생은 정말 나에게 얼굴 질문을했다! ! ! 나는 나 자신을 찾을 수 없음! ! ! (╯¯Д¯는) ╯╘═╛
하지만 지금은 누수가 가득. 주로 자바 스크립트 매크로 및 마이크로 작업 큐 작업 큐의 내용과 관련이 문서, 후속 내가 비동기 자바 스크립트를 정돈 할 수있는 기회가있다?


먼저,이 코드는 출력이 무엇인지에 대해 생각해 봅시다.

			const p = new Promise(function(resolve, reject) {
			    resolve();
			    setTimeout(() => {
			      console.log(1);
			    });
			    console.log(2);
			}).then(res => {
			    console.log(3);
			});
			console.log(4);

답은 2413입니다

나는 매우 아 왜 모르는 의아해하고 있지 않다. 자바 스크립트는이 주문이 너무 혼란스러워했다 방법, 당신에게서 아래로 해결되지 않습니다. 이 비동기 문제를 포함한다.

비동기 실행 순서는 어떻게을의 종류

파싱 JS 코드 블록 부분이 순차 동기, 비동기 부분을 수행 MacroTask는 큐 (매크로 작업 대기열) 및 MicroTask 큐 (마이크로 작업 대기열)을 반영한다.

MacroTask 큐 (매크로 작업 대기열)을 포함한다 :

  • setTimeout, setInterval, setImmediate, requestAnimationFrame, NodeJS中的I/O, UI渲染그리고에 이렇게.

MicroTask 큐 (마이크로 태스크 큐)는 주로 두 가지 종류를 포함한다 :

  • 독립 콜백 Microtask : Promise.then catch finally서로의 성공 / 실패 콜백 함수와 독립적
  • : 복합 콜백 Microtask Object.observe(사용되지 않음), MutationObserverNodeJs中的 process.nextTick이들의 동일한 콜백 함수의 다른 상태;

작업 대기열 태스크로부터 판독 JS 메인 쓰레드 일정한주기라는기구를 실행하는 작업을 수행 하는 이벤트 루프 (이벤트 루프).

프로세스 루프는 다음과 같습니다 :

  • (해결에 수행 완료 될 때까지 동기화 코드를 수행 </script>태그);
  • 큐 MicroTask 확인
    • 비동기 작업을 해결해야하는 경우, MacroTask를 비동기 적으로 구현이 완료 될 때까지 트리거 모든 작업을 수행 한 다음 큐를 확인하기 위해
    • 비동기 작업이 처리되지 않는 경우, 큐 직접 MacroTask을 확인
  • 큐 MacroTask 확인
    • 트리거 비동기 작업을하면, 모든 작업이 실행이 끝날 때까지 계속 수행하기 위해, 등 첫 MicroTask가 큐에 참여 받아이를 처리합니다.

상단에이 글을 읽고 후. 이 문제는 해결 한 것입니다.
나는 아래 그림은 밖으로 표시했다.
그림 삽입 설명 여기

  • 동기화 코드
    • 즉시 만들 것을 약속드립니다.
    • 실행 해결 ()
    • 만남의 setTimeout, 작업 큐에 매크로를 실행되지 않습니다
    • 메치오닌 CONSOLE.LOG (2), 출력 2를 수행
    • 그 때는 마이크로 작업 큐에 수행하지
    • 만난 CONSOLE.LOG (4), 출력 4
  • MicroTask 큐 :
    • 약속은 CONSOLE.LOG를 수행, 그 때는있다 (3)의 출력 (3)
    • MicroTask 빈 큐, 큐는 MacroTask을 확인
  • MacroTask 큐 :
    • 에서는 setTimeout은 큐 MicroTask에이 넣어
    • 큐 MicroTask 확인
  • MicroTask 큐 :
    • 거기에서는 setTimeout 실행 CONSOLE.LOG (1), 출력
    • MicroTask 빈 큐, 큐는 MacroTask을 확인
  • MacroTask 큐 :
    • 큐는 이벤트 루프의 끝 비어

나는 너무 피곤 아 해요

게시 된 131 개 원래 기사 · 원 찬양 451 · 전망 540 000 +

추천

출처blog.csdn.net/qq_36667170/article/details/105126891