자바스크립트에서 이벤트 루프(Event Loop)의 실행 순서

이 글의 내용은 자바스크립트에서 이벤트 루프(Event Loop)의 실행 순서에 관한 내용입니다. 참고할만한 내용이 있으니 참고하시면 도움이 될 것 같습니다.

간단한 소개: EvenLoop 큐에서 promise.resove, setTimeout, setImmediate, process.nextTick의 실행 순서에 대해 이야기합니다.

문제의 원인

이벤트 루프는 낯선 사람이 아니며 메인 스레드를 참조합니다.

例1：

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

console.log(2)

//输出2,1

와 같은 루프에서 작업 읽기 위의 예에서 우리는 메인 스레드의 동기화 작업이 먼저 실행되는 것을 이해합니다. 메인 스레드 작업이 완료되면 작업이 읽혀집니다. 이벤트 루프이므로 2를 먼저 출력한 다음 1을 출력합니다.

이벤트 루프가 작업을 읽는 순서는 작업 큐(작업 큐)의 다양한 작업 읽기 규칙에 대한 제한 사항에 따라 다릅니다. 예를 들어 다음 예에서는

例2：

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

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//输出为  1  2 3

Output 1 먼저 동기화 작업이 기본 스레드에서 먼저 실행되므로 문제가 없습니다. 여기서 문제는 setTimeout 및 Promise.then 작업의 실행 우선순위가 정의되는 방식입니다. .

실행 순서

Job 큐의 큐는 매크로 태스크와 마이크로 태스크의 두 가지 유형으로 나뉩니다. 실행 순서 규정을 살펴보기 위해 예를 들어 보겠습니다.

macro-task队列包含任务: a1, a2 , a3
micro-task队列包含任务: b1, b2 , b3

의 실행 순서는 다음과 같습니다. 먼저 marco-task 대기열의 시작 부분에서 작업을 실행합니다. 이는 a1입니다(a1은 동기화의 주요 작업을 나타냅니다). ) 작업이 완료된 후 마이크로 작업을 실행합니다. 대기열의 모든 작업은 b1, b2, b3 순서로 실행됩니다(비동기). 실행 후 마이크로 작업의 작업이 지워집니다. 그런 다음 marco-task(비동기)의 두 번째 작업이 순서대로 실행됩니다.

매크로 태스크와 마이크로 태스크 큐의 실행 순서를 이해한 후, 실제 시나리오에서 이 두 가지 유형의 큐에 실제로 포함된 태스크를 살펴보겠습니다(노드 V8 엔진을 예로 들어보겠습니다). 이 두 가지 유형의 실제 작업 순서는 다음과 같습니다.

macro-task 대기열에 실제로 작업이 포함되어 있습니다.

script(主程序代码)[对应上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task 대기열에 실제로 작업이 포함되어 있습니다.

process.nextTick, Promises, Object.observe, MutationObserver

여기에서 우리가 얻는 실행 순서는 다음과 같습니다.

script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

ES6에서는 매크로 작업 대기열을 ScriptJobs라고도 하며 마이크로 작업을 PromiseJobs

Example

(1) setTimeout 및 promise

例3:

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

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);

(2) process.nextTick 및 promise, setTimeout

例子4：
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//输出2,6,5,3,4,1

(3 )이라고도 합니다. 더 복잡한 예시

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

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//输出的是  2 6 5 1 3 4

이 예시의 이유는 실행 순서에 따라 판단해 주세요. 여기서는 하나씩 설명하지 않겠습니다

위 내용은 자바스크립트에서 이벤트 루프(Event Loop)의 실행 순서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!