setTimeout과 Promise 분석

우리는 먼저 흔히 볼 수 있는 전단 면접 문제를 보았다.

var p1 = new Promise(function(resolve, reject){
    resolve(1);
})
setTimeout(function(){
  console.log("will be executed at the top of the next Event Loop");
},0)
p1.then(function(value){
  console.log("p1 fulfilled");
})
setTimeout(function(){
  console.log("will be executed at the bottom of the next Event Loop");
},0)

이전 코드의 출력 순서는 어떻습니까?이 문제도 본문 창작의 원천이다. 그 답은 다음과 같다.

p1 fulfilled
will be executed at the top of the next Event Loop
will be executed at the bottom of the next Event Loop

비동기식 작업

JavaScript 이벤트 순환 병발 모델을 돌이켜보면 setTimeout과 Promise가 호출하는 것은 모두 비동기적인 작업이라는 점을 알 수 있다. 이것은 모두 작업 대기열을 통해 관리/스케줄링을 하는 공통점이다.그럼 얘네는 뭐가 달라요?다음 글은 계속 소개하겠습니다.

작업 대기열

앞에서 임무 대기열의 기초 내용과 메커니즘을 소개했고 보기를 선택할 수 있으며 본고는 임무 대기열을 확대하고 소개한다.JavaScript는 작업 대기열을 통해 모든 비동기식 작업을 관리하며, 작업 대기열은 MacroTask Queue와 MicoTask Queue 두 종류로 나눌 수 있습니다.
MacroTask Queue
MacroTask Queue(매크로 작업 대기열)는 주로 setTimeout, setInterval, setImmediate, requestAnimationFrame, NodeJS의'I/O 등을 포함한다.
MicroTask Queue
MicroTask Queue(미 작업 대기열)는 다음과 같은 두 가지 유형으로 구성됩니다.
독립 리셋 microTask: 예를 들어 Promise의 성공/실패 리셋 함수는 서로 독립적이다.복합 리셋 microTask: 예를 들어 Object.observe, MutationObserver, NodeJs의 프로세스.nextTick, 서로 다른 상태가 같은 함수체에 리셋됩니다.
MacroTask 및 MicroTask
JavaScript는 비동기식 작업을 MacroTask와 MicroTask로 구분하는데, 그 차이점은 무엇입니까?
실행이 끝날 때까지 동기화 코드를 순서대로 실행합니다.acroTask 대기열을 검사하고 트리거된 비동기 작업이 있으면 첫 번째를 취하고 이벤트 처리 함수를 호출한 다음 세 번째 단계로 이동하고 처리할 비동기 작업이 없으면 세 번째 단계로 이동합니다.MicroTask 대기열을 검사한 후 트리거된 모든 비동기 작업을 실행하고 이벤트 처리 함수를 순서대로 실행하며 실행이 끝날 때까지 두 번째 단계로 이동합니다. 처리할 비동기 작업이 없으면 두 번째 단계로 돌아가 후속 절차를 순서대로 수행합니다.마지막으로 두 번째 단계로 돌아가서 MacroTask 대기열을 계속 검사하고 다음 절차를 순서대로 수행한다.이렇게 왕복하면 모든 비동기 임무 처리가 완성되면 끝난다.
링크:https://juejin.im/post/5b7057b251882561381e69bf