마이크로 및 매크로 작업 작업 - JS 작동 메커니즘을 이해

얼굴 질문에서 생각.

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  reslove();
}).then(function(data) {
  console.log(3);
});

console.log(2);
复制代码

출력 : 1,2,3,4. 의 이유를 생각해 보자.

동기 및 비동기 실행 스택 큐로 분할 브라우저 이벤트 루프 eventLoop는 제 실행 실행 스택 동기화 얻을 비동기 큐에서 촬영 될 비동기 태스크를 수행 한 후 동기화 태스크, 태스크 동기화를 수행한다.

비동기 큐를 복용하는 경우, 작업 사이에 구분이 마이크로 및 매크로 작업을 구별하는 것입니다있을 것입니다.

microtask : microtask 높은 우선 순위 큐를 점프 할 수는 먼저 실행 정의하지. 포함 : 다음의 약속, 관찰자, MutationObserver, setImmediate
macrotask : 매크로 작업, 낮은 우선 순위는 먼저 첫 번째 실행을 정의합니다. 포함 : 아약스,의 setTimeout, setInterval을, 이벤트 바인딩, PostMessage를, MessageChannel (메시지 통신에 사용)

작업이 처음으로 마이크로 비동기 작업은 작업 마이크로 작업이 완료되었습니다 실행을 위해 꺼낸 있도록 우선 순위가 높은 마이크로 작업 때문에, 매크로 작업 실행에서 작업을 이동합니다.

우리는 위의 문제를 보면이 시간, 약속, 작업을 동기화 작업이 비동기이며, 마이크로 작업 그 때는 약속한다. 지연이 0 인 경우에도 매크로 작업에서는 setTimeout 사용하여, 그것은 또한 매크로 작업입니다.

따라서, 상기 실행 순서는 첫번째의 setTimeout macrotask 비동기 큐 풀에 추가되며, 다음 약속을 수행 console.log(1), 약속은 그 때는 마이크로 비동기 큐 태스크 풀을 첨가하고 동기화 작업을 수행 할 console.log(2)때 작업 동기화 실행 후, 마이크로 작업 작업 실행에 console.log(3), 마이크로 - 매크로 작업 실행은 작업 실행을 완료 한 후 걸릴 console.log(4). 그래서 순서는 다음과 같습니다 1,2,3,4.

확장 :

이 질문에 일부 포장 재구성 :

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  setTimeout(function() {
    reslove('done');
  }, 0);
  reslove('first');
}).then(function(data) {
  console.log(data);
});

console.log(2);
复制代码

이 시간 출력됩니다 : reslove을 사용하는 경우 1, 2, 첫 번째, 4, 더 출력 할이, 어떤 사람들은 생각하지 수는 약속 1,2 먼저, 4, 수행, 당신은이 시간이 알고 출력한다 상태를 pedding에서하는 해결되고 상태가 변경의 약속은 변경할 수 없습니다 후 , 그래서 reslove('done')그것은 실행되지 않습니다.

우리가 때 reslove('done')변경 console.log('done')시간을, 그는 출력 1, 2는, 첫째, 4 위로 할 것입니다.

더 복잡한 변화를 수행합니다 :

setTimeout(function() {
  console.log(1);
}, 0);

new Promise(function(reslove) {
  console.log(2);
  reslove('p1');
  new Promise(function(reslove) {
    console.log(3);
    setTimeout(function() {
      reslove('setTimeout2');
      console.log(4);
    }, 0);
    reslove('p2');
  }).then(function(data) {
    console.log(data);
  });
  setTimeout(function() {
    reslove('setTimeout1');
    console.log(5);
  }, 0);
}).then(function(data) {
  console.log(data);
});

console.log(6);
复制代码

결과 출력은 : 2,3,6, P2, p1,1,4,5.

작업의 동기화를 수행하여, 작업의 새로운 약속 동기화되어, 상기 제 1 출력 2,3,6-하고 큐를 점프 할 수 마이크로 마이크로 작업의 작업을 수행하기 때문에, P1이 먼저 실행을 정의 할 수 없지만 제 P2 실행 및 P1의 구현 마이크로 작업이 실행될 때, 작업을 수행하는 매크로는 매크로 태스크를 순차적으로 출력 1,4,5은 setTimeout1되도록 setTimeout2하지 출력 상태를 변경할 수 약속.

마이크로 및 매크로 작업 작업 - JS 작동 메커니즘을 이해

추천