매크로 JS 및 마이크로 작업 작업

이미 존재하는 매크로 및 마이크로 작업 JS의 작업을 알고 있다면, 당신은 이미 약속을 한 것입니다. JS 약속 때문에 마이크로 작업 항목입니다.
질문에 먼저보기 :

setTimeout(function(){
    console.log('setTimeout')
});

new Promise(function(resolve, reject){
    console.log('pormise body');
    resolve();
}).then(function(){
    console.log('promise then')
});

console.log('main');

이 질문에 대한 답은 다음과 같습니다

promise body
main
promise then
setTimeout

첫 번째 줄에 약속 몸이 예상치 못한 놀라운 아니다에서는 setTimeout은 약속의 뒷면에 출연했다.

에서는 setTimeout 예기치하지 않을 경우, 첫 번째 출력의 setTimeout 물고기 수 있지만 실제로는 반대한다, 다음의 setTimeout과 약속을하기 전에 정의 비동기 호출하고 약속한다.

지식 포인트 매크로 및 마이크로 작업 작업입니다에 여기 온다. 당신의 경험 코드를 위의 공유 :

setTimeout(function(){ // 同步代码，语句1
    console.log('setTimeout') // 宏任务，语句2
});

new Promise(function(resolve, reject){
    console.log('pormise body'); // 同步代码，语句3
    resolve(); // 同步代码，语句4
}).then(function(){
    console.log('promise then') // 微任务，语句5
});

console.log('main'); // 同步代码，语句6

그런 다음 규칙 그들은 그것이 무엇을 실행하는?

원래 호출 큐 모두 가지고 각각의 매크로 및 마이크로 임무 태스크 (FIFO).

그것은 매크로 작업, 마이크로 작업, 그들은 자신의 전화 큐를 밀어 버린다 발생. 동기 코드는 매크로 작업입니다 주목해야한다.

작업을 실행하는 매크로는 작업 큐는 마이크로, 비운 마이크로 작업을 비우고 그 다음 매크로 작업로 이동합니다.

하자가에 대한 책을 읽은 선으로 위의 코드 라인을 넣어 :

먼저 두 개의 큐를 정의 매크로 작업 큐 : MacroQqueue, 마이크로 태스크 큐 : MicroQueue

첫 번째 단계는 눌러 동기화 코드 시퀀스를 실행
동기화 코드를, 문장 1 : 매크로 작업을 추가, 문 2 MacroQueue을 누릅니다. // MacroQueue [{태스크 : 문 2}]
동기 부호, 문 3 : 인쇄 약속 본체
동기 부호, 문 (4) : 마이크로 태스크 명령문 5 푸시 MicroQueue 추가. // MicroQueue : [{작업 : 문 5}]
동기 코드, 문 6 : 주요 인쇄. // 동기 코드 (매크로 작업)을 완료하는

두 번째 단계는 작업 큐는 마이크로 비워 시작
5 문은, 다음, MicroQueue에서 인쇄 약속을 뛰어 : 마이크로 작업. // 마이크로 작업 큐가 비어

세 번째 단계는 작업 큐 매크로 비워 시작
매크로 작업 :이 문을 MacroQqueue에서 뛰어에서는 setTimeout // 매크로 작업 큐가 비어있는 인쇄

4 단계 : 마이크로 작업 큐 비우기 시작
큐 비어 ...

주기가 완료됩니다. 주기가 계속 그래서, 다음 라운드를 시작합니다.

위의 설명을 통해, 우리는 매크로 작업에, 마이크로 조작기구의 작업이 그것의 특정 이해를 할 수 있어야한다. 매크로 및 마이크로 작업의 일반적인 작업을 가지고 무엇 그래서?
다음 표를 참조하십시오 :

매크로 작업	브라우저	nodejs
동기화 코드	✅	✅
I / O	✅	✅
에서는 setTimeout	✅	✅
setInterval을	✅	✅
setImmediate	❌	✅
requestAnimationFrame	✅	❌

마이크로 작업	브라우저	nodejs
process.nextTick	❌	✅
MutationObserver	✅	❌
약속 (비동기 / await를)	✅	✅

음, 우리는 복잡한 문제 연습 손을 가리 :

console.log('sync statement 1');
Promise.resolve().then(function() {
    console.log('micro task 1');
    setTimeout(function() {
        console.log('macro task 1');
    }, 0);
}).then(function() {
    console.log('micro task 2');
});

setTimeout(function() {
    console.log('macro task 2')
    Promise.resolve().then(function(){
        console.log('micro task 3');
    })
}, 0)
console.log('sync statement 2');

//输出：
// sync statement 1
// sync statement 2
// micro task 1
// micro task 2
// macro task 2
// micro task 3
// macro task 1

이 분석을 용이하게하기 위해 표시 :

console.log('sync statement 1'); // 同步代码，语句1
Promise.resolve().then(function() { // 同步代码，语句2，注册了一个微任务
    console.log('micro task 1'); // 微任务，语句3
    setTimeout(function() { // 微任务，语句4，同时注册了一个宏任务
        console.log('macro task 1'); // 宏任务，语句5
    }, 0);
}).then(function() {
    console.log('micro task 2'); // 微任务，语句6
});

setTimeout(function() { // 同步代码，语句7
    console.log('macro task 2') // 宏任务，语句8
    Promise.resolve().then(function(){ // 宏任务，语句9，同时注册了一个微任务
        console.log('micro task 3'); // 微任务，语句10
    })
}, 0)
console.log('sync statement 2'); // 同步代码，语句11

매크로 JS 및 마이크로 작업 작업

추천